<!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> |