【小月博客】用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: ：大家在用的時候有什么問題及時給我反饋，我寫的肯定不是做好的，其實我想學習一下可以多張上傳的功能。但是現階段只能分享到這里了。