利用FileReader实现多图片预览

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

前端:

<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

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页