js實現圖片上傳預覽及進度條

原文js實現圖片上傳預覽及進度條?

?? 最近在做圖片上傳的時候，由于產品設計的比較fashion，上網找了比較久還沒有現成的，因此自己做了一個，實現的功能如下：

???? 1：去除瀏覽器<input type="file">默認的樣式；

???? 2：圖片從本地選擇后，立即預覽圖片；

???? 3：使用上傳可以查看上傳進度(本博做的是上傳的百分比，做成進度條類似)；

???? 先看效果圖：

?????????????????????????????????????????????

??? 做完的效果圖如下：

?

????????????????

?

??? 首先是去除瀏覽器默認上傳圖片框，這個不是設置的css，再者<input type="file">具有安全性的限制，應該不是那么好操作的。這里使用的方法很簡單，設置<input>為隱藏，再寫個<div>,這個<div>標簽的onclick事件觸發<input>的onclick事件：

???

<input id="localpic1" type="file" style="display:none"><div id="showpic1" οnclick="document.getElementById('localpic1').click();" data="點擊添加海報">點擊添加海報</div>

這個比較簡單，下面看看圖片的預覽：）

? 圖片的預覽利用了<input type="file">的onchange事件，當檢測到圖片替換的時候，顯示替換后的圖片，我這邊是直接插入的<img>標簽，下面是布局：

?<li> ?   ?<font>海報</font> ??   <div class="pic" id="showpic1" οnclick="document.getElementById('localpic1').click();" data="點擊添加海報"> ??????????點擊添加海報 ?????</div> ?????<div id="showpic1Name"></div> ?????<div id="showpic1Size"></div> ?????<div class="info"> ????????<a id="showpic1Up" style="display:none" href="#" οnclick="uploadFile('pic1')">上傳</a> ????????<a id="showpic1Me" style="display:none" href="#">上傳中</a> ????????<a id="showpic1De" href="#" style="display:none" οnclick="deletePic('pic1')">刪除</a> ????????</div> ??</li>

onchange事件：獲取圖片的地址(value)，好吧，這個萬惡的各種瀏覽器。然后獲取圖片的信息予以顯示，這個相對還是比較簡單的，聰明的小伙應該一下就明白。

<input id="locallogo" type="file" οnchange="previewImage(this,'showlogo');">
/**圖片的操作*/function previewImage(fileObj,divPreviewId){var allowExtention=".jpg,.bmp,.gif,.png";//允許上傳文件的后綴名document.getElementById("hfAllowPicSuffix").value;var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();            var browserVersion= window.navigator.userAgent.toUpperCase();if(allowExtention.indexOf(extention)>-1){ if(fileObj.files){//兼容chrome、火狐7+、360瀏覽器5.5+等，應該也兼容ie10，HTML5實現預覽if(window.FileReader){var reader = new FileReader(); reader.onload = function(e){document.getElementById(divPreviewId).innerHTML="<img src='"+e.target.result+"'>";}  reader.readAsDataURL(fileObj.files[0]);}else if(browserVersion.indexOf("SAFARI")>-1){alert("不支持Safari瀏覽器6.0以下版本的圖片預覽!");}}else if (browserVersion.indexOf("MSIE")>-1){//ie、360低版本預覽if(browserVersion.indexOf("MSIE 6")>-1){//ie6document.getElementById(divPreviewId).innerHTML="<img src='"+fileObj.value+"'>";}else{//ie[7-9]
                    fileObj.select();if(browserVersion.indexOf("MSIE 9")>-1)fileObj.blur();//不加上document.selection.createRange().text在ie9會拒絕訪問var newPreview =document.getElementById(divPreviewId+"New");if(newPreview==null){newPreview =document.createElement("div");newPreview.setAttribute("id",divPreviewId+"New");newPreview.style.width = "150px";newPreview.style.height = "150px";newPreview.style.border="solid 1px #d2e2e2";}newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";                            var tempDivPreview=document.getElementById(divPreviewId);tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);tempDivPreview.style.display="none";                    }}else if(browserVersion.indexOf("FIREFOX")>-1){//firefoxvar firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);if(firefoxVersion<7){//firefox7以下版本document.getElementById(divPreviewId).innerHTML="<img src='"+fileObj.files[0].getAsDataURL()+"'>";}else{//firefox7.0+ document.getElementById(divPreviewId).innerHTML="<img src='"+window.URL.createObjectURL(fileObj.files[0])+"'>";}}else{document.getElementById(divPreviewId).innerHTML="<img src='"+fileObj.value+"'>";}         }else{alert("僅支持"+allowExtention+"為后綴名的文件!");fileObj.value="";//清空選中文件if(browserVersion.indexOf("MSIE")>-1){                        fileObj.select();document.selection.clear();}                fileObj.outerHTML=fileObj.outerHTML;}document.getElementById(divPreviewId).style.border="";document.getElementById(divPreviewId+"Up").style.display="block";document.getElementById(divPreviewId+"De").style.display="block";showFileInfo(fileObj.files[0],divPreviewId);}//獲取圖片的大小、名稱予以顯示，這里還可以顯示圖片的文件類型function showFileInfo(file,divPreviewId) {var fileName = file.name;var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);if (file) {var fileSize = 0;if (file.size > 1024 * 1024){fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';}else{fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';}document.getElementById(divPreviewId+"Name").innerHTML = '文件名: ' + file.name;document.getElementById(divPreviewId+"Size").innerHTML = '圖片大小: ' + fileSize;document.getElementById(divPreviewId+"Name").style.display="block";document.getElementById(divPreviewId+"Size").style.display="block";}}

?? 最后一個進入條問題比較難以解決，你要監聽圖片上傳了多少。我覺得大部分人在這里會選擇插件，那樣的話就不用自己管了，但是如果有興趣，繼續往下看吧，I am glad to share my skill with you all!

??? 當我用<form>解決不了，用ajax解決不了的時候(我看ajax有人好像說能上傳文件，這個處理下應該是可以的)，就想到了XMLHttpRequest()，嘿嘿。

     function uploadFile(fileId) {document.getElementById("show"+fileId+"Up").style.display="none";document.getElementById("show"+fileId+"Me").style.display="block";var fd = new FormData();fd.append("file", document.getElementById("local"+fileId).files[0]);var xhr = new XMLHttpRequest();//上傳中設置上傳的百分比xhr.upload.addEventListener("progress", function(evt){if (evt.lengthComputable) {var percentComplete = Math.round(evt.loaded * 100 / evt.total);document.getElementById("show"+fileId+"Me").innerHTML = '上傳中'+percentComplete+"%";}else {document.getElementById("show"+fileId+"Me").innerHTML = '無法計算';}}, false);//請求完成后執行的操作xhr.addEventListener("load", function(evt){var message = evt.target.responseText,obj = eval("("+message+")");if(obj.status == 1){$("#"+fileId).val(obj.picName);document.getElementById("show"+fileId+"Me").innerHTML = "已上傳";alert("上傳成功!");}else{alert(obj.message);}}, false);//請求errorxhr.addEventListener("error", uploadFailed, false);//請求中斷xhr.addEventListener("abort", uploadCanceled, false);//發送請求xhr.open("POST", "${ctx}/manage/file/File/uploadPic.htm");xhr.send(fd);}function uploadFailed(evt) {alert("上傳出錯.");}function uploadCanceled(evt) {alert("上傳已由用戶或瀏覽器取消刪除連接.");}

? ok，最后一個問題算是搞定了，在firefox，ie9,chrome下測試沒有問題，版本應該都不高，其他的就不管了哈。 ? 本人第一次發博，各位大俠手下留情~

?