How to get the file upload progress in js? js code to get file upload progress

不言
Release: 2018-08-07 11:31:20
Original
2933 people have browsed it

The content of this article is about how to obtain the file upload progress in js? js code to obtain file upload progress, it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

js Get file upload progress:

 
Copy after login

js monitor:

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; } }
Copy after login

Ajax file upload function:

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); }, }) }
Copy after login

Full code:

      Document 
Copy after login

Recommended related articles:

How to use native JavaScript to implement carousel images? Detailed explanation of the code

#Detailed explanation of js cases of taking integers and remainders (with code)

[js]: Detect user input, text box default Style setting, design table style to realize selecting all and inverting selection

The above is the detailed content of How to get the file upload progress in js? js code to get file upload progress. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!