纯js批量上传预览图片

前提：<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.别忘了点赞谢谢！