主页 > 网站建设 >

js批量上传文件特效代码

网站建设 2022-07-27 08:02www.1681989.com免费网站
今天接受项目中要完成文件批量上传文件而且还要显示上传进度，一开始觉得这个应该不是很麻烦，当我在做的时候遇到了很多问题，很头疼啊。不过看了别人写的代码，自己也测试过，发现网上好多都存在一些问题，并不是自己想要的，可实现删除，图片预览，文件批量上传，显示文件大小等功能。 script src = js/vue.m.js /script div id = app div class = hello div class = upload div class = upload_warp div class = […]



今天接受项目中要完成文件批量上传文件而且还要显示上传进度，一开始觉得这个应该不是很麻烦，当我在做的时候遇到了很多问题，很头疼啊。不过看了别人写的代码，自己也测试过，发现网上好多都存在一些问题，并不是自己想要的，可实现删除，图片预览，文件批量上传，显示文件大小等功能。

  1. <script src="js/vue.m.js"></script>
  2. <div id="app">
  3.   <div class="hello">
  4.     <div class="upload">
  5.       <div class="upload_warp">
  6.         <div class="upload_warp_left" @click="fileClick">
  7.           <img src="img/upload.png">
  8.         </div>
  9.         <div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
  10.           或者将文件拖到此处
  11.         </div>
  12.       </div>
  13.       <div class="upload_warp_text">
  14.         选中{{imgList.length}}个文件，共{{bytesToSize(this.size)}}
  15.         <span class="ml20 c-red">[单个附件的最大尺寸为10MB]</span>
  16.       </div>
  17.       <put @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none">
  18.       <div class="upload_warp_img" v-show="imgList.length!=0">
  19.         <div class="upload_warp_img_div" v-for="(item,dex) of imgList">
  20.           <div class="upload_warp_img_div_">
  21.             <div class="upload_warp_img_div_text">
  22.               {{item.file.name}}
  23.             </div>
  24.             <img src="img/del.png" class="upload_warp_img_div_del" @click="fileDel(dex)">
  25.           </div>
  26.           <img :src="item.file.src">
  27.         </div>
  28.       </div>
  29.     </div>
  30.   </div>
  31. </div>
  32. <script>
  33.   var app = new Vue({
  34.     el: '#app',
  35.     data () {
  36.       return {
  37.         imgList: [],
  38.         size: 0
  39.       }
  40.     },
  41.     methods: {
  42.       fileClick(){
  43.         document.getElementById('upload_file').click()
  44.       },
  45.       fileChange(el){
  46.         if (!el.target.files[0].size) return;
  47.         this.fileList(el.target.files);
  48.         el.target.value = ''
  49.       },
  50.       fileList(files){
  51.         for (let i = 0; i < files.length; i++) {
  52.           this.fileAdd(files[i]);
  53.         }
  54.       },
  55.       fileAdd(file){
  56.         this.size = this.size + file.size;//总大小
  57.         let reader = new FileReader();
  58.         reader.vue = this;
  59.         reader.readAsDataURL(file);
  60.         reader.onload = function () {
  61.           file.src = this.result;
  62.           this.vue.imgList.push({
  63.             file
  64.           });
  65.         }
  66.       },
  67.       fileDel(dex){
  68.         this.size = this.size - this.imgList[dex].file.size;//总大小
  69.         this.imgList.splice(dex, 1);
  70.       },
  71.       bytesToSize(bytes){
  72.         if (bytes === 0) return '0 B';
  73.         let k = 1000, // or 1024
  74.           sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
  75.           i = Math.floor(Math.log(bytes) / Math.log(k));
  76.         return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
  77.       },
  78.       dragenter(el){
  79.         el.sPropagation();
  80.         el.preventDefault();
  81.       },
  82.       dragover(el){
  83.         el.sPropagation();
  84.         el.preventDefault();
  85.       },
  86.       drop(el){
  87.         el.sPropagation();
  88.         el.preventDefault();
  89.         this.fileList(el.dataTransfer.files);
  90.       }
  91.     }
  92.   })
  93. </script>
  94. <div style="text-align:center;marg:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  95. </div>

上一篇：

织梦取消数据表字段大小写限制

 下一篇：

没有该栏目数据, 可能缓存文件请检查是否有

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by