利用FileReader实现多图片预览

lizhi_ma 2019-03-17 18:00:47

447

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_31279347/article/details/88623312

版权

效果图：在这里插入图片描述

前端：

<div class="photos-upload-view">
      <div>
         <input type="file" id="fileselect" name="imagesFile" multiple="multiple" onchange="showPreview(this)" accept="image/*"/>
      </div>
      <div id="messages">
         <p id="message_for_p">图片信息预览窗口 【注：每张图片不得超过5MB，最多上传三张图片，限 jpg/png/gif/jpeg 格式】
         </p>
         <div id="previewImg"></div>
      </div>
</div>

js部分：

<script type="text/javascript">
    function showPreview(obj){
        //初始化预览窗口
        document.getElementById("previewImg").innerHTML = "";
        if(obj.files){
            for(var i=0;i<obj.files.length;i++){
                var reader=new FileReader();  //创建对象用于文件读取
                reader.readAsDataURL(obj.files[i]);//读取的内容是加密以后的本地文件路径
                reader.function(evt){ // 数据读取完成时触发onload对应的响应函数
                var text = document.getElementById("previewImg").innerHTML;
                //evt.target是FileReader等同于reader
                document.getElementById("previewImg").innerHTML = text+"<img class='imgPreview' src='"+evt.target.result+"'/>";
                }
            }
        }
    }
</script>

参考来源：https://www.jianshu.com/p/d3f4e91b02e0