圖片上傳實時預覽效果

一. 創建一個文件上傳的input框 id爲doc

/這是圖片上傳的input框
<input type='file' id='doc' name='pic' style='width:60px;margin-left:20px;'>

二. 在該input框後面創建一個div裏面嵌套img標籤 div id爲localImag img標籤的id爲preview

//這是要展示上傳圖片的div以及img標籤
<div style="width:100px;height:100px;float:right;" id="localImag">
        <img src="" id="preview" alt="">
 </div>

三. 在js裏面寫,綁定input的默認值發生改變即選中文件的事件並獲取到值 調用函數將值作爲實參傳進去

//綁定更換頭像實現預覽的效果
    $("input[name='pic']").live('change',function(){
        var file = $(this).val();
        setImagePreview(file);
    });

四. 複製下面的代碼 也是在js裏面

//實現實時預覽的函數
 function setImagePreview(avalue) {
    var docObj = document.getElementById("doc");
    //img
    var imgObjPreview = document.getElementById("preview");
    //div
    var divs = document.getElementById("localImag");
    if (docObj.files && docObj.files[0]) {
       //火狐下，直接設img屬性
       imgObjPreview.style.display = 'block';
       imgObjPreview.style.width = '100px';
       imgObjPreview.style.height = '100px';
       //imgObjPreview.src = docObj.files[0].getAsDataURL();
       //火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
       imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
     } else {
       //IE下，使用濾鏡
       docObj.select();
       var imgSrc = document.selection.createRange().text;
       var localImagId = document.getElementById("localImag");
       //必須設置初始大小
       localImagId.style.width = "100px";
       localImagId.style.height = "100px";
       //圖片異常的捕捉，防止用戶修改後綴來僞造圖片
       try {
           localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"
           localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        } catch(e) {
            alert("您上傳的圖片格式不正確，請重新選擇!");
            return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
     }
   return true;
}