Chrome实现文件夹拖拽并预览其中的图片
背景
- 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/[email protected]/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>
效果显示
结束语
方法亲测可用,同时感谢那些分享方法的大佬,本人收益匪浅。