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" onclick="document.getElementById('localpic1').click();" data="點擊添加海報">點擊添加海報</div>

 

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

 

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

 

複製代碼

 <li>

     <font>海報</font>

     <div class="pic" id="showpic1" onclick="document.getElementById('localpic1').click();" data="點擊添加海報">

          點擊添加海報

     </div>

     <div id="showpic1Name"></div>

     <div id="showpic1Size"></div>

     <div class="info">

        <a id="showpic1Up" style="display:none" href="#" onclick="uploadFile('pic1')">上傳</a>

        <a id="showpic1Me" style="display:none" href="#">上傳中</a>

        <a id="showpic1De" href="#" style="display:none" onclick="deletePic('pic1')">刪除</a>

        </div>

  </li>

複製代碼

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

 

複製代碼

<input id="locallogo" type="file" onchange="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){//ie6

                    document.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){//firefox

                var 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);

        //請求error

        xhr.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("上傳已由用戶或瀏覽器取消刪除鏈接.");

    }