基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
在上篇文章給大家介紹了這篇文章里面的后臺(tái)Servlet。所以這里只看前臺(tái)的JS代碼。
首先HTML5用AJAX提交數(shù)據(jù)先要學(xué)習(xí)一個(gè)HTML5新增加的對(duì)象:FormData
FormData 對(duì)象可以使用append 方法進(jìn)行 key - value的數(shù)據(jù)添加,與以前我們常用的json不同的就是可以異步上傳二進(jìn)制文件。
1、FormDate對(duì)象的創(chuàng)建
var formData = new FormData();
2、向 FormDate 對(duì)象添加數(shù)據(jù)
formData.append("catname", "我是一只喵"); formData.append("age", 1); // 數(shù)字類型會(huì)轉(zhuǎn)為字符串類型 // 可以增加上傳的二進(jìn)制文件,比如fileInputElement對(duì)象中已經(jīng)包含了用戶所選擇的文件 formData.append("userfile", fileInputElement.files[0]); //也可以將一個(gè) Blob 對(duì)象添加到 formData 中 var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; var oBlob = new Blob([oFileBody], { type: "text/xml"}); formData.append("webmasterfile", oBlob);
3、使用 FormData 對(duì)象
var xhr = new XMLHttpRequest(); xhr.open("POST", "upload"); xhr.send(formData);
HTML部分
FormData 對(duì)象簡單的介紹完畢后,我們來看看頁面的HTML代碼是怎么寫的
<img width="400" height="250"/><br /> <input type="file" id="pic" name="pic" onchange="showPic()"/> <input type="button" value="上傳圖片" onclick="uploadFile()" /><br /> <div id="parent"> <div id="son"></div> </div>
最下面的div是用來顯示進(jìn)度條的,所以需要對(duì)應(yīng)的css樣式。樣式如下,顏色不好看,自己改吧:
<style type="text/css"> #parent{width:550px; height:10px; border:2px solid #09F;} #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} </style>
JS部分
重頭戲來了,在頁面上加載上jquery后我們來看 JavaScript 是怎么寫的,首先是 file 組件的 onchange事件方法:
function showPic(){ var pic = $("#pic").get(0).files[0]; $("img").prop("src" , window.URL.createObjectURL(pic) ); }
showPic的第一行是從 file 對(duì)象得到上傳文件 。 第二行則為 img 設(shè)置了src屬性。 可以在頁面中得到即時(shí)預(yù)覽的效果。
在看 uploadFile 方法之前,再讓我們簡單學(xué)習(xí)一下進(jìn)度事件 (Progress Events )的progress 吧 ......
Progress Events規(guī)范是W3C的一個(gè)工作草案,定義了與客戶端服務(wù)器通信有關(guān)的事件。這些事件最早其實(shí)值針對(duì)XHR操作,但目前也被其它API借鑒。有以下6個(gè)進(jìn)度事件。
loadstart:在接收到相應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。
progress:在接收相應(yīng)期間持續(xù)不斷觸發(fā)。 //我們就只看著一個(gè)好了
error:在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)。
abort:在因?yàn)檎{(diào)用abort()方法而終止鏈接時(shí)觸發(fā)。
load:在接收到完整的相應(yīng)數(shù)據(jù)時(shí)觸發(fā)。
loadend:在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)。
progress事件是Mozilla提交的,這個(gè)事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。而onprogress事件處理程序會(huì)接收到一個(gè)event對(duì)象,其target屬性是XHR對(duì)象,但包含著三個(gè)額外的屬性:
lengthComputable :表示進(jìn)度信息是否可用的布爾值
position :表示已經(jīng)接收的字節(jié)數(shù)
totalSize :表示根據(jù)Content-Length相應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。
有了這些信息,我們就可以為用戶創(chuàng)建一個(gè)進(jìn)度指示器了。但是 問題又來了, jQuery的 ajax 方法沒有關(guān)于 progress 事件的操作。這怎么玩~~
好在通過查閱資料發(fā)現(xiàn),jQuery的ajax方法調(diào)用的XMLHttpRequest對(duì)象是可以指定的!??!
看 8453行,就是它了。于是 uploadFile 方法的ajax部分的時(shí)候代碼就變成了這個(gè)樣式。
最重要的部分代碼:
function uploadFile(){ // 獲取上傳文件,放到 formData對(duì)象里面 var pic = $("#myhead").get(0).files[0]; var formData = new FormData(); formData.append("file" , pic); $.ajax({ type: "POST", url: "upload", data: formData , //這里上傳的數(shù)據(jù)使用了formData 對(duì)象 processData : false, //必須false才會(huì)自動(dòng)加上正確的Content-Type contentType : false , //這里我們先拿到j(luò)Query產(chǎn)生的 XMLHttpRequest對(duì)象,為其增加 progress 事件綁定,然后再返回交給ajax使用 xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } }); }
最后加上 onprogress 方法,為整個(gè)功能花上個(gè)句號(hào)。
/** * 偵查附件上傳情況 ,這個(gè)方法大概0.05-0.1秒執(zhí)行一次 */ function onprogress(evt){ var loaded = evt.loaded; //已經(jīng)上傳大小情況 var tot = evt.total; //附件總大小 var per = Math.floor(100*loaded/tot); //已經(jīng)上傳的百分比 $("#son").html( per +"%" ); $("#son").css("width" , per +"%"); }
最后附上整個(gè)頁面的代碼,方便對(duì)比。
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> #parent{width:550px; height:10px; border:2px solid #09F;} #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} </style> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript"> function showPic(){ var pic = $("#pic").get(0).files[0]; $("img").prop("src" , window.URL.createObjectURL(pic) ); uploadFile(); } function uploadFile(){ var pic = $("#pic").get(0).files[0]; var formData = new FormData(); formData.append("file" , pic); /** * 必須false才會(huì)避開jQuery對(duì) formdata 的默認(rèn)處理 * XMLHttpRequest會(huì)對(duì) formdata 進(jìn)行正確的處理 */ $.ajax({ type: "POST", url: "upload", data: formData , processData : false, //必須false才會(huì)自動(dòng)加上正確的Content-Type contentType : false , xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } }); } /** * 偵查附件上傳情況 ,這個(gè)方法大概0.05-0.1秒執(zhí)行一次 */ function onprogress(evt){ var loaded = evt.loaded; //已經(jīng)上傳大小情況 var tot = evt.total; //附件總大小 var per = Math.floor(100*loaded/tot); //已經(jīng)上傳的百分比 $("#son").html( per +"%" ); $("#son").css("width" , per +"%"); } </script> </head> <body> <img width="400" height="250"/><br /> <input type="file" id="pic" name="pic" onchange="showPic()"/> <input type="button" value="上傳圖片" onclick="uploadFile()" /><br /> <div id="parent"> <div id="son"></div> </div> </body> </html>
- jQuery Ajax文件上傳(php)
- jquery ajax實(shí)現(xiàn)文件上傳功能實(shí)例代碼
- jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
- jQuery+ajax簡單實(shí)現(xiàn)文件上傳的方法
- jQuery+ajax實(shí)現(xiàn)文件上傳功能
- jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳
- 基于jquery ajax的多文件上傳進(jìn)度條過程解析
- jquery實(shí)現(xiàn)異步文件上傳ajaxfileupload.js
- jquery?ajax實(shí)現(xiàn)文件上傳提交的實(shí)戰(zhàn)步驟
相關(guān)文章
初步了解JavaScript,Ajax,jQuery,并比較三者關(guān)系
這篇文章主要介紹了初步了解JavaScript,Ajax,jQuery,并比較三者關(guān)系的相關(guān)資料,需要的朋友可以參考下2015-10-10ajax三級(jí)聯(lián)動(dòng)下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了ajax三級(jí)聯(lián)動(dòng)下拉菜單的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03解決ajax返回驗(yàn)證的時(shí)候總是彈出error錯(cuò)誤的方法
這篇文章主要介紹了解決ajax返回驗(yàn)證的時(shí)候總是彈出error錯(cuò)誤的方法,感興趣的小伙伴們可以參考一下2016-01-01Ajax請(qǐng)求WebService跨域問題的解決方案
這篇文章主要介紹了Ajax請(qǐng)求WebService跨域問題的解決方案,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10使用FormData進(jìn)行Ajax請(qǐng)求上傳文件的實(shí)例代碼
這篇文章主要介紹了使用FormData進(jìn)行Ajax請(qǐng)求上傳文件的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08