js如何获取文件上传进度?js获取文件上传进度的代码
程序员文章站
2022-04-20 08:17:32
...
本篇文章给大家带来的内容是关于js如何获取文件上传进度?js获取文件上传进度的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
js获取文件上传进度:
<input name="file" id="FileUpload" type="file" /> <input type="button" onclick="Submit()" value="提交" />
js监听:
var xhrOnProgress=function(fun) { xhrOnProgress.onprogress = fun; //绑定监听 //使用闭包实现监听绑 return function() { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } }
ajax文件上传函数:
function Submit(){ var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象 var formFile = new FormData(); formFile.append("file", fileObj); //加入文件对象 var data = formFile; $.ajax({ url: url, data: data, type: "Post", dataType: "json", cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 xhr:xhrOnProgress(function(e){ var percent=e.loaded/e.total;//文件上传百分比 console.log(percent); }), success: function (result) { console.log(result); }, }) }
完整代码:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <input name="file" id="FileUpload" type="file" /> <input type="button" onclick="Submit()" value="提交" /> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> var xhrOnProgress=function(fun) { xhrOnProgress.onprogress = fun; //绑定监听 //使用闭包实现监听绑 return function() { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } } function Submit(){ var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象 var formFile = new FormData(); formFile.append("file", fileObj); //加入文件对象 var data = formFile; $.ajax({ url: "http://up.qiniu.com/", data: data, type: "Post", dataType: "json", cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 xhr:xhrOnProgress(function(e){ var percent=e.loaded/e.total; console.log(percent); }), success: function (result) { console.log(result); }, }) } </script> </html>
相关文章推荐:
【js】:检测用户输入、文本框默认样式设置、设计表格样式实现全选反选
以上就是js如何获取文件上传进度?js获取文件上传进度的代码的详细内容,更多请关注其它相关文章!
上一篇: 零基础怎么入手ps
下一篇: 实例详解JS实现分页浏览横向图片
推荐阅读
-
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
-
Java实现拖拽文件上传dropzone.js的简单使用示例代码
-
JS实现批量上传文件并显示进度功能
-
aspupload文件重命名及上传进度条的解决方法附代码第1/2页
-
PHP 文件上传进度条的两种实现方法的代码
-
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览
-
JS实现浏览上传文件的代码
-
通过jquery获取上传文件名称、类型和大小的实现代码
-
golang简单获取上传文件大小的实现代码
-
AJAX和JSP实现的基于WEB的文件上传的进度控制代码