Chrome实现文件夹拖拽并预览其中的图片

背景

1. Chrome浏览器，楼主用的是70以上的版本。
2. pycharm编辑器（这里没有用VScode，因为发现用VScode打开代码和pycharm打开代码效果不一样）

需求

在网上查找了很多资料，也浏览了许多文章，大部分都是关于拖拽文件或者多个文件的资料，然而楼主需要的是拖拽文件夹这一操作。

实现

这个是可以预览到全部文件并输出信息的，打开被注释的两个函数，同时将图片过滤的正则注释掉即可，这里将js与css放在了html文本里。

• html代码

  <div id="app">
      <div class="upload upload-box" id="upload" style="font-size:20px">
          拖动文件夹到此处上传
      </div>
  </div>
  
  <div id="messages" style="width: 100%; float: left;">
  </div>
  

• css代码

<style>
        #upload {
            /*display: none;*/
            width: 100%;
            height: 200px;
            font-weight: bold;
            text-align: center;
            padding: 1em 0;
            margin: 1em 0;
            color: #555;
            border: 2px dashed #555;
            border-radius: 7px;
            cursor: default;
        }

        #upload.hover {
            color: #f00;
            border-color: #f00;
            border-style: solid;
            box-shadow: inset 0 3px 4px #888;
        }
  </style>

• js代码
  代码还是比较多的，

<script src="http://layui.hcwl520.com.cn/layui-v2.4.5/layui.js?v=201811010202"></script>
<script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
   
   // getElementById
   function $id(id) {
       return document.getElementById(id);
   }


   const upload = document.getElementById('upload');
   // var btn = $id("send_to_oss2")
   upload.addEventListener('dragover', uploadFunc, false);
   upload.addEventListener('drop', uploadFunc, false);


   // del img 删除某个预览的图片
   function image_delete(image_ele_id) {
       $("#" + image_ele_id).parent().parent().remove()
   }

   // detail file
   function addFile(file, dirname) {
       //    file.name  file.size  file.type
       // 过滤文件类型
       var re = /\w*\.?(jpg|png|jpeg|bmp|webp)$/gi;
       var filename = file.name;
       resultArr = re.test(filename);
       var image_div = $("#messages");
       if (resultArr) {
           var image_obj = new FileReader()
           image_obj.onload = function () {
               filetype = file.type;
               gen_image(image_div, image_obj.result, filename, filetype, dirname)
           };
           image_obj.readAsDataURL(file);
           // ParseFile(file);
       }
   }

   // move dir  拖拽事件的开始
   function uploadFunc(event) {
       event.preventDefault();
       let files = [];
       if (event.type === 'drop') {
           let fileList = event.dataTransfer.files;
           let len = fileList.length;
           for (let i = 0; i < len; i++) {
               files[i] = fileList[i];
           }
           if (files.length) {
               let items = event.dataTransfer.items;
               if (items && items.length && items[0].webkitGetAsEntry != null) {
                   addFilesItems(items);
               }
           }
       }
   }

   // detail dir   这里可以去看一下Directentry对象
   function addFilesItems(items) {
       return function () {
           var ret = [];
           for (var i = 0; i < items.length; i++) {
               var item = items[i];
               var entry;

               if (item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
                   if (entry.isFile) {
                       // 把文件对象放到结果数组中
                       ret.push(addFile(item.getAsFiles()));
                   } else if (entry.isDirectory) {
                       ret.push(addFilesFormDirectory(entry, entry.name));
                   }
               }
           }
       }();
   }

   // read file of dir  读取文件夹的主要函数
   function addFilesFormDirectory(directory, path) {
       const dirReader = directory.createReader();
       const readEntries = function readEntries() {
           return dirReader.readEntries(function (entries) {
               entries.forEach(function (entry) {
                   if (entry.isFile) {
                       // 如果是文件
                       entry.file(function (file) {
                           file.fullPath = path + '/' + file.name;
                           // 那么暴露出去的就是 '文件夹/q.jpg' 这种形式
                           console.log(path)  // 文件夹名称
                           // console.log(file.fullPath)  // 文件夹名/文件名  可保存目录结构
                           return addFile(file, path);
                       });
                       // return addFile(entry.file);
                   } else if (entry.isDirectory) {
                       // 递归处理
                       // 允许包含子文件夹
                       addFilesFormDirectory(entry, path + '/' + entry.name);
                       // 不允许包含子文件夹
                       // alert("请确保所选文件夹中没有文件夹");
                       // location.reload(true);
                   }
               });
           });
       };
       return readEntries();
   }


   // display_image  预览图片的函数
   function gen_image(image_div, image_src, filename, filetype, dirname) {
       var i = image_div.children('div.col-sm-3').length;
       i = i + 928;
       let file_name = filename;
       let file_type = filetype;
       let dir_name = dirname;
       let image_ele_id = 'product_image_' + i;
       let _html =
           `<div style="width: 280px;float:left;" class="col-sm-3" "drop(event,this)" "allowDrop(event)"
                       draggable="true" "drag(event, this)" >
           <div class="thumbnail">
           <img class="display_img" style="width:200px;height:200px; float:left;margin:5px 0px;" src="${image_src}" id="${image_ele_id}" name="${file_type}" alt="${file_name}" title="${dir_name}">
           <span style="text-align: center;display:block;">
           <a style="float:left;margin-top:180px;margin-left:5px;" class="layui-btn layui-btn-danger layui-btn-xs" "image_delete('${image_ele_id}')">
           <i class="layui-icon layui-icon-delete"></i>删除</a>
           </span>
           </div>
           </div>`;
       let image_div_length = image_div.children('div.col-sm-3').length;
       if (image_div_length % 4 === 0 && image_div_length >= 4) {
           let old_height = image_div.css('height').toString().replace('px', '');
           image_div.css('height', 250 + parseInt(old_height) + 'px');
       }
       image_div.append(_html);
   }

   // add img info
   // function Output(msg) {
   //     var m = $id("messages");
   //     m.innerHTML = msg + m.innerHTML;
   // }

   // output file information
   // function ParseFile(file) {
   //     // 输出文件信息
   //     Output(
   //         "<p>File information: <strong>" + file.name +
   //         "</strong> type: <strong>" + file.type +
   //         "</strong> size: <strong>" + file.size +
   //         "</strong> bytes</p>"
   //     );
   // }
</script>

效果显示

结束语

方法亲测可用，同时感谢那些分享方法的大佬，本人收益匪浅。