前提：<script src="js/jquery.min.js"></script>

參考：http://www.jq22.com/jquery-info833

1.頁面程式碼

<!--第一張-->
        <input type='file' id='doc1' name='file' style='width:60px;margin-left:20px;'>
        <div style="width:100px;height:100px;" id="localImag1">
            <img src="" id="preview1" alt="">
         </div>
         <!--第二張-->
         <input type='file' id='doc2' name='file' style='width:60px;margin-left:20px;'>
        <div style="width:100px;height:100px;" id="localImag2">
            <img src="" id="preview2" alt="">
         </div>
         <!--第三個-->
         <input type='file' id='doc3' name='file' style='width:60px;margin-left:20px;'>
        <div style="width:100px;height:100px;" id="localImag3">
            <img src="" id="preview3" alt="">
         </div>

2.js程式碼

//繫結實現預覽的效果
                 $("input[name='file']").on('change',function(){
                    var file = $(this).val();
                    var aa=$(this).attr('id');
                    var bb=aa.substr(3);
                    setImagePreview(file,bb);
                });
                //實現實時預覽的函式
                 function setImagePreview(avalue,bb) {
                     
                     
                     
                    var docObj = document.getElementById("doc"+bb);
//                    alert(docObj.files[0]);
                    //img
                    var imgObjPreview = document.getElementById("preview"+bb);
                    //div
                    var divs = document.getElementById("localImag"+bb);
                    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"+bb);
                       //必須設定初始大小
                       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;
                   
                   
                }

3.複製貼上即可使用

4.別忘了點贊謝謝！