【小月博客】用HTML5的File API作上傳圖片預覽功能

前段時間作了一個項目，涉及到上傳本地圖片以及預覽的功能，正好以前瞭解過 html5（點擊查看更多關於web前端的有關資源） 能夠上傳本地圖片，而後再網上看了一些demo結合本身的需求，終於搞定了。（PS ： 不得不認可我這我的有多懶，沒有需求的時候我向來不主動去學習）。移動端徹底支持哦！已測試。

下面給你們看看代碼吧怎麼實現的

第一：HTLM部分（這裏不去作漂亮的樣式了咱們注重學習功能）

<input type="file" id="fileElem" multiple accept="image/*"  onchange="handleFiles(this)">
<div id="fileList" style="width:200px;height:200px;"></div>

注：若是想寫成很漂亮的那種上傳按鈕，告訴你們個人寫法就是模擬上傳，即在input下面決定定位一張圖片（上傳按鈕），input的寬高和圖片色值同樣大小，透明度爲0 ，最後別忘記涉及z-index的順序。

第二：JS利用H5新功能處理上傳

Js實現圖片上傳前的預覽功能，主要是使用html5 的 Files API 實現，ie可兼容部分功能，在火狐和chrome下正常運行。HTML5的 file input標籤支持multiple 和 accept ，前一個屬性可控制多文件選擇，後一個控制上傳的文件類型。預瞭解更多關於File API的資料，有本身查下。

若有不明白請查看註解，或者給我留言均可以的。

註解：

    這裏咱們就說一下思路吧（我本身的理解）：

 

1. 首先 img.src = window.URL.createObjectURL(files[0]) 是咱們建立的本地路徑，爲了本地預覽而設置的。
2. 第二咱們就涉及到了H5上傳那麼咱們第一步就是讀出來這個圖片的信息 reader.onload 這個方法就是讀取img的信息數據
3. 當讀取成功就能夠調用上傳的後臺接口，來處理文件上傳到什麼位置了。

<script>
    window.URL = window.URL || window.webkitURL;
    var fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");
    function handleFiles(obj) {
        var files = obj.files,
        img = new Image();
        if(window.URL){
            //File API
            alert(files[0].name + "," + files[0].size + " bytes");
            img.src = window.URL.createObjectURL(files[0]); //建立一個object URL，並非你的本地路徑
            img.width = 200;
            img.onload = function(e) {
                window.URL.revokeObjectURL(this.src); //圖片加載後，釋放object URL
            }
            fileList.appendChild(img);
        }else if(window.FileReader){
            //opera不支持createObjectURL/revokeObjectURL方法。咱們用FileReader對象來處理
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function(e){
                alert(files[0].name + "," +e.total + " bytes");
                img.src = this.result;
                img.width = 200;
                fileList.appendChild(img);
            }
        }else{
            //ie
            obj.select();
            obj.blur();
            var nfile = document.selection.createRange().text;
            document.selection.empty();
            img.src = nfile;
            img.width = 200;
            img.onload=function(){
                alert(nfile+","+img.fileSize + " bytes");
            }
            fileList.appendChild(img);
        }
    }
</script>

PS: ：你們在用的時候有什麼問題及時給我反饋，我寫的確定不是作好的，其實我想學習一下能夠多張上傳的功能。可是現階段只能分享到這裏了。