Le contenu de cet article explique comment obtenir la progression du téléchargement du fichier en js ? js pour obtenir la progression du téléchargement des fichiers, il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
js pour obtenir la progression du téléchargement des fichiers :
<input name="file" id="FileUpload" type="file" /> <input type="button" onclick="Submit()" value="提交" />
surveillance 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; } }
Fonction de téléchargement de fichiers 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); }, }) }
Code complet :
<!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>
Recommandations d'articles connexes :
Explication détaillée des cas js de prise d'entiers et de restes (avec code)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!