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

最新推荐文章于 2023-09-14 21:00:33 发布

Yg丶Dmw

最新推荐文章于 2023-09-14 21:00:33 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文件夹拖拽图片预览文章标签：文件夹拖拽图片预览

本文链接：https://blog.youkuaiyun.com/Yg_Dmw/article/details/89062117

背景

Chrome浏览器，楼主用的是70以上的版本。
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>
<