Js文件上传前的预览和删除

 3395

Js文件上传前的预览和删除


本来想对文件批量上传前进行排序操作,虽然也实现了但是只能以base64进行排序,然后还得交给后端去处理base64然后上传,对于小文件还行,大文件的话显然是不实用的。所以也没啥好的方法最终还是选择了上传后进行手动排序Js文件上传前的预览和删除。比较成熟的部分贴出来给大家参考一下。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>文件上传预览和删除</title>
  8.         <style>
  9.             #img-box{display: flex;padding: 20px 0;}
  10.             #img-box .img-item{width: 150px;height: auto;overflow: hidden;margin-right: 10px;}
  11.             #img-box .img-item img{width: 100%;height: 100px;}
  12.             #img-box .img-item .delete-img{color: #f00;}
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <div>
  17.             <div>
  18.                 <span>点击上传图片</span>
  19.                 <input
  20.                     type="file"
  21.                     accept=".png,.jpg,.jpeg,image/png,image/jpg,image/jpeg"
  22.                     name=""
  23.                     id="uploadfile"
  24.                     multiple
  25.                 />
  26.             </div>
  27.             <div id="img-box"></div>
  28.         </div>
  29.     </body>
  30. </html>
  31. <script>
  32.     var div;
  33.     //创建FormData对象
  34.     var allfileList = new FormData(); 
  35.     // 当用户上传时触发事件
  36.     var input = document.getElementById("uploadfile");
  37.     input.onchange = function () {
  38.         readFile(this);
  39.     };
  40.     // 处理图片并添加都dom中的函数
  41.     let sortNum = 0; //标记文件索引
  42.     var readFile = function (obj) {
  43.         // 获取文件转成真数组(不转也可以,转了有其它妙用,比如排序)
  44.         fileList = Array.from(obj.files);
  45.         // 对文件组进行遍历,可以到控制台打印出fileList去看看
  46.         for (var i = 0; i < fileList.length; i++) {
  47.             // 创建FileReader对象
  48.             var reader = new FileReader();
  49.             // 使用readAsDataURL方法读取文件对象
  50.             reader.readAsDataURL(fileList[i]);
  51.             // 当文件读取成功时执行的函数
  52.             let thisfile = fileList[i];
  53.             reader.onload = function (e) {
  54.                 allfileList.append(`file${sortNum}`, thisfile); //添加队列中
  55.                 div = document.createElement("div");
  56.                 div.className = 'img-item'
  57.                 div.innerHTML = `<span style='display:none;'>${sortNum++}</span><img src="${this.result}" /><a onclick='delFile(this)'>删除</a>`;
  58.                 // this.result获取图片本地地址,进行预览;
  59.                 document.getElementById("img-box").appendChild(div);
  60.                 // html中添加元素,方便预览
  61.             };
  62.         }
  63.     };
  64.     function delFile(event) {
  65.         // 文件标识
  66.         let fileNum = event.parentElement.getElementsByTagName("span")[0].innerHTML;
  67.         // 删除文件列表中的文件
  68.         allfileList.delete(`file${fileNum}`);
  69.         // 删除页面上的元素
  70.         document.getElementById("img-box").removeChild(event.parentElement);
  71.         // 剩余的文件
  72.         allfileList.forEach((value, key) => {
  73.             console.log(key, value);
  74.         });
  75.     }
  76. </script>


本文网址:https://www.zztuku.com/detail-13217.html
站长图库 - Js文件上传前的预览和删除
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐