在谈谈文件上传前,我想分享一个事儿。很多年,我听了一个篮球比赛解说员在解说一场篮球比赛,他当时在直播中是这样回应了喷他的人的(大致内容):早上小巷子里有很多为上班族提供早餐的,卖包子油条都有,当你买了一家的包子,觉得不好吃,并不需要破口放粗话,只需要换另一家买早餐就好了。生活中,在很多事情上确实也是这个道理(额外注释:在撸游戏中遇到猪一样的队友就不一样嘞,都忍不住BB几句)。
在以下谈到的上传文件中,主要是js+jq+html。,html代码中用到了input控件,h5中input控件支持multiple属性,可以一次选中多个文件。js中用到了两个很关键的对象:FormData,负责表单数据;XMLHttpRequest,负责请求。对于h5的input、FormData、XMLHttpRequest的详细介绍,需要的朋友可以到w3school查阅or百度这几个关键词。分享了两个例子:单文件上传和多文件上传。这两个文件上传都是带有进度条的。
下面贴出关键代码(不包含后台处理文件代码):
1、单文件上传
html:
1 <div class="picture" id="pic_cont"> 2 <ul> 3 <li class="uploading" style="display:none;"><div class="rad-prg" id="indicatorContainer"></div></li> 4 </ul> 5 </div> 6 <a class="pic" onclick="AddImg()"></a> 7 <div class="hidden" style="display:none;z-index:-10;"> 8 <input id="UpFile" type="file" /> 9 </div>
js:
1 $(function () { 2 $("#UpFile").change(function (e) { 3 FileUpload(); 4 e.stopPropagation(); 5 }) 6 }); 7 //add image 8 function AddImg() { 9 $("#UpFile").click(); 10 }; 11 // upload file 12 function FileUpload() { 13 var mid = $("#hiddMid").val(); 14 var fileObj = document.getElementById("UpFile").files[0]; 15 $("#indicatorContainer").parent("li").show(); 16 var form = new FormData(); 17 form.append("mid", mid); 18 form.append("file", fileObj); 19 var xhr = null; 20 if (window.XMLHttpRequest) { 21 xhr = new XMLHttpRequest(); 22 } 23 else if (window.ActiveXObject) { 24 xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6 25 } 26 if (xhr != null) { 27 xhr.open("post", "/Tools/UploadMiniImage", true); 28 xhr.onreadystatechange = function () { 29 if (xhr.readyState == 4) { 30 if (xhr.status == 200) { 31 var result = eval("(" + xhr.responseText + ")"); 32 } 33 else { 34 //alert("Problem retrieving XML data"); 35 } 36 } 37 } 38 if (typeof window.addEventListener != "undefined") { 39 xhr.upload.addEventListener("progress", progressBar, false); 40 } 41 else { 42 xhr.upload.attachEvent("progress", progressBar); //ie 43 } 44 xhr.send(form); 45 } 46 else alert("强烈建议升级浏览器!"); 47 }; 48 49 //progress bar 50 function progressBar(evt) { 51 if (evt.lengthComputable) { 52 var pros = Math.round(evt.loaded / evt.total * 100); 53 fileUpBar.value(pros); 54 } 55 };
2、多文件上传
html:
1 <div class="picture" id="pic_cont"> 2 <ul> 3 <li class="uploading" style="display:none;"><div class="rad-prg" id="indicatorContainer"></div></li> 4 </ul> 5 </div> 6 <a class="pic" onclick="AddImg()"></a> 7 <div class="hidden" style="display:none;z-index:-10;"> 8 <input id="UpFile" type="file" multiple="multiple" /> 9 </div>
js:
1 $(function () { 2 $("#UpFile").change(function (e) { 3 FileUpload(); 4 e.stopPropagation(); 5 }) 6 }); 7 //add image 8 function AddImg() { 9 $("#UpFile").click(); 10 }; 11 // upload file - multiple 12 function FileUpload() { 13 var oversize = ""; 14 var mid = $("#hiddMid").val(); 15 var fileList = document.getElementById("UpFile").files; 16 var goimg = false; 17 var form = new FormData(); 18 form.append("mid", mid); 19 for (var i = 0; i < fileList.length; i++) { 20 if (fileList[i].size < (10 * 1024 * 1024)) { 21 form.append("file", fileList[i]); 22 goimg = true; 23 } 24 else { 25 oversize += fileList[i].name + " 超过10M,"; 26 } 27 } 28 if (goimg) $("#indicatorContainer").parent("li").show(); 29 var xhr = null; 30 if (window.XMLHttpRequest) { 31 xhr = new XMLHttpRequest(); 32 } 33 else if (window.ActiveXObject) { 34 xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6 35 } 36 if (xhr != null) { 37 xhr.open("post", "/Tools/UploadMultiMiniImage", true); 38 xhr.onreadystatechange = function () { 39 if (xhr.readyState == 4) { 40 if (xhr.status == 200) { 41 var result = eval("(" + xhr.responseText + ")"); 42 43 } 44 else { 45 //alert("Problem retrieving XML data"); 46 } 47 } 48 } 49 if (typeof window.addEventListener != "undefined") { 50 xhr.upload.addEventListener("progress", progressBar, false); 51 } 52 else { 53 xhr.upload.attachEvent("progress", progressBar); //ie 54 } 55 xhr.send(form); 56 } 57 else alert("强烈建议升级浏览器!"); 58 if (oversize != "") alert(oversize); 59 }; 60 61 //progress bar 62 function progressBar(evt) { 63 if (evt.lengthComputable) { 64 var pros = Math.round(evt.loaded / evt.total * 100); 65 fileUpBar.value(pros); 66 } 67 };
单文件上传和多文件上传的原理都一样的,只有在代码处理上的一些差异。