标签：setting nload src dstar 上传 url jquery data erro
概述：ajax提交比较大的文件的时候，我们希望能够看到它上传的进度，代码放下面了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest 上传文件进度条示例</title> </head> <body> <progress id="upload_progress" value="0" max="100"></progress> <input id="upload_file" type="file" name="upload_file" /> <button id="btn_start">Start</button> <button id="btn_cancel">Cancel</button> <script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script> <script type="text/javascript"> var xhr = new XMLHttpRequest(); var progressBar = document.getElementById(‘upload_progress‘); $(‘#btn_start‘).click(function() { var uploadFile = document.getElementById(‘upload_file‘).files[0]; var formData = new FormData(); formData.append(‘upload_file‘, uploadFile); // --------------------------------------- // 原生xmlHttpRequest发送 xhr.open(‘post‘, ‘/server_url.php‘); xhr.onload = function() { alert(‘完成！‘); }; xhr.onerror = function() { alert(‘无法连接服务器！‘); }; xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = progress.loaded; } }; xhr.upload.onloadstart = function() { console.log(‘started...‘); }; xhr.send(formData); // --------------------------------------- // 使用ajax发送 /** $.ajax({ type: "POST", url: "/server_url.php", data: formData , //这里上传的数据使用了formData 对象 processData: false, contentType: false, //必须false才会自动加上正确的Content-Type //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用 xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = progress.loaded; } }; xhr.upload.onloadstart = function() { console.log(‘started...‘); }; } return xhr; } }).done(function(resp) { alert(‘完成！‘); }).fail(function(err) { alert(‘无法连接服务器！‘) });*/ }); $(‘#btn_cancel‘).click(function() { xhr.abort(); }); </script> </body> </html>
原理就是这样，需要在此基础上做扩展的可以随意添加自己想要的功能。
标签：setting nload src dstar 上传 url jquery data erro
原文地址：http://www.cnblogs.com/shizqiang/p/5984783.html
