<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>文件文件夹拖拽上传</title>
<style>
.dragarea {
width: 100%;
height: 100px;
box-sizing: border-box;
border: 1px dashed rgb(27, 27, 189);
text-align: center;
border-radius: 4px;
}
.dragarea span {
line-height: 100px;
color: #5f5a5a;
cursor: pointer;
}
.dropcontext {
position: relative;
margin-top: 30px;
}
.dropcontext li:after {
clear: both;
}
.dropcontext ul:after {
clear: both;
}
.dropcontext:after {
clear: both;
}
</style>
</head>
<body>
<div class="page-container">
<div class="dragarea js-drag item"><span>请把文件拖动到这里来</span></div>
<div class="dropcontext">
<ul>
<!-- <li><input type="text" value="112233" class="fileitem uploaded" dataurl=""></li> -->
</ul>
</div>
<div class="divupload">
<label><input type="file" style="display: none;" multiple value="添加" onchange="funcselectfile(this);">添加</label>
</div>
</div>
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function readDirectory(directory) {
return new Promise((resolve, reject) => {
const dirReader = directory.createReader();
let entries = [];
const getEntries = function () {
dirReader.readEntries(
function (results) {
if (results.length) {
entries = entries.concat(results);
getEntries();
} else {
resolve(entries);
}
},
function (error) {
reject(error);
}
);
};
getEntries();
});
}
async function readRoll(arr) {
for (let key in arr) {
if (arr[key].isDirectory) {
let result = await readDirectory(arr[key]);
arr[key] = result;
await readRoll(result);
}
}
}
function readFileEntry(fileEntry) {
return new Promise((resolve, reject) => {
fileEntry.file(
(fileData) => {
fileData.fullPath = fileEntry.fullPath;
resolve(fileData);
},
(error) => {
reject(error);
}
);
});
}
//export
async function dropedFileReader(event) {
if (!event.dataTransfer || !event.dataTransfer.items) {
this.uploadLoading = false;
throw new Error();
}
let fileEntryList = [];
for (let item of event.dataTransfer.items) {
fileEntryList.push(item.webkitGetAsEntry());
}
await readRoll(fileEntryList);
fileEntryList = fileEntryList.flat(Infinity);
const fileList = [];
for (let item of fileEntryList) {
console.log(item);
let fileData = await readFileEntry(item);
fileList.push(fileData);
}
return fileList;
}
//待上传的文件列表
var _selectfilelist = null;
//加载的时候注册事件
window.onload = function () {
var dragElement = document.querySelector('.js-drag');
//过滤文件格式
var fileTypeArray = ['exe', 'pbo','less'];
var file = {
type: function (files, fileTypeArray) {
//这里做文件的过滤
if (_selectfilelist == null) { _selectfilelist = []; }
_selectfilelist.push(files);
},
info: function (files) {
if (files.size > 0) {
file.type(files, fileTypeArray);
}
}
}
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler, false);
}
},
removeEventListener: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler, false);
}
}
}
EventUtil.addHandler(dragElement, "drop", function (event) {
event.preventDefault();
event.stopPropagation();
dropedFileReader(event).then((data) => {
for (let item of data) {
file.info(item);
}
});
});
EventUtil.addHandler(dragElement, "dragenter", function (event) {
event.preventDefault();
event.stopPropagation();
});
EventUtil.addHandler(dragElement, "dragover", function (event) {
event.preventDefault();
event.stopPropagation();
});
}
//选择文件
function funcselectfile(e) {
for (var k = 0; k < (e).files.length; k++) {
var fileitem = (e).files[k];
if (_selectfilelist == null) { _selectfilelist = []; }
_selectfilelist.push(fileitem);
}
}
//上传文件
function _upload(){
var formData = new FormData();
for(var obj of uploadfilelist){
formData.append(obj.name, obj.file);
}
$.ajax({
url: "/api/Upload/File",
type: 'post',
contentType: false,
processData: false,
async: true,
data: formData,
headers: {"token": '112233'},
success: function (obj) {
uploadfiles = null;
},
error: function (res) {
}
});
}
</script>
</body>
</html>2.引入layer.js
上传事件
//上传文件
function _upload() {
var loadid = layer.load();
var itemfunc = function (item) {
if (item) {
var fdata = new FormData();
fdata.append("fullPath", item.fullPath);
fdata.append("time", (new Date()).getTime());
fdata.append("name", item.name);
fdata.append(item.name, item);
fdata.append("lastModified", item.lastModified);
$.ajax({
url: "/api/file/dropupload",
type: 'post',
contentType: false,
processData: false,
async: true,
data: fdata,
headers: { "token": '112233' },
success: function (obj) {
console.log(obj);
},
error: function (res) {
console.error(es);
}, complete: function () {
if (_selectfilelist.length > 0) {
itemfunc(_selectfilelist.shift());
} else {
layer.close(loadid);
console.log("上载完成");
}
}
});
}
};
if (_selectfilelist.length > 0) {
itemfunc(_selectfilelist.shift());
} else {
layer.close(loadid);
console.log("上载完成");
}
}服务端接收文件
/// <summary>
///
/// </summary>
/// <returns></returns>
[HttpPost]
[Route("/api/file/dropupload")]
public dynamic drop()
{
var result = false;
var msg = String.Empty;
if (base.Request.Form != null)
{
var lastMillSecond = DateTime.Now.ToUnixTimeMilliseconds();
var fullPath = String.Empty;
//这里还需要换算时差
if (base.Request.Form.ContainsKey("lastModified"))
{
long.TryParse(base.Request.Form["lastModified"], out lastMillSecond);
}
if (base.Request.Form.ContainsKey("fullPath"))
{
fullPath = base.Request.Form["fullPath"].ToString();
}
if (lastMillSecond == 0) { lastMillSecond = DateTime.Now.ToUnixTimeMilliseconds(); }
if (base.Request.Form.Files != null)
{
if (base.Request.Form.Files.Count > 0)
{
for (var k = 0; k < base.Request.Form.Files.Count; k++)
{
var finput = base.Request.Form.Files[k];
var save = $"/app/wwwroot/temp{fullPath}";
var path = System.IO.Path.GetDirectoryName(save);
if (!System.IO.Directory.Exists(path)) { System.IO.Directory.CreateDirectory(path); }
System.IO.File.Delete(save);
using (System.IO.FileStream fs = new System.IO.FileStream(save, System.IO.FileMode.Create))
{
finput.CopyTo(fs);
fs.Flush();
fs.Dispose();
}
var finfo = new System.IO.FileInfo(save);
finfo.LastWriteTime = lastMillSecond.ToDateTimeFromMilliseconds();
result = true;
msg = save;
}
}
}
}
return new
{
result = result,
msg = msg
};
}
读取现有的文件递归读取下级
/// <summary>
/// read linux path files!
/// </summary>
/// <param name="path"></param>
/// <returns></returns>
[HttpGet]
[Route("/api/file/dropread")]
public dynamic dropread(string path="/app/wwwroot/temp")
{
if (!System.IO.Directory.Exists(path))
{
System.IO.Directory.CreateDirectory(path);
}
var list = new List<DropFileItem>();
ReadFile(path, list,path);
return list;
}
/// <summary>
/// 从文件夹中读取文件 递归
/// </summary>
/// <param name="path"></param>
/// <param name="list"></param>
/// <param name="root"></param>
private void ReadFile(string path,List<DropFileItem> list,string root)
{
if (path.Contains(@"\")) { path = path.Replace(@"\", "/"); }
if (System.IO.Directory.Exists(path))
{
System.IO.Directory.CreateDirectory(path);
}
else
{
Console.WriteLine($"path:{path} not exists!");
}
Console.WriteLine($"begin read path:{path}");
var dir = new System.IO.DirectoryInfo(path);
var dirs = dir.GetDirectories();
foreach (var item in dirs)
{
ReadFile(CombinePath(path,item.Name),list,root);
}
var files = dir.GetFiles();
foreach (var item in files)
{
var one = new DropFileItem()
{
fullPath = ReadRelativePath(root, item.DirectoryName) + item.Name,
lastModified = item.LastWriteTime.ToLocalMilliseconds(),
name = item.Name
};
Console.WriteLine(Newtonsoft.Json.JsonConvert.SerializeObject(one));
list.Add(one);
}
}
/// <summary>
/// 合并路径
/// </summary>
/// <param name="headpath"></param>
/// <param name="footpath"></param>
/// <returns></returns>
private string CombinePath(string headpath, string footpath)
{
if (!headpath.StartsWith("/") && !headpath.StartsWith(@"\"))
{
headpath = "/" + headpath;
}
if (headpath.Contains(@"\"))
{
headpath = headpath.Replace(@"\", "/");
}
if (headpath.Contains(@"\\"))
{
headpath = headpath.Replace(@"\\", "/");
}
if (headpath.Contains("//"))
{
headpath = headpath.Replace("//", "/");
}
if (!footpath.StartsWith("/") && !footpath.StartsWith(@"\"))
{
footpath = "/" + footpath;
}
if (footpath.Contains(@"\"))
{
footpath = footpath.Replace(@"\", "/");
}
if (footpath.Contains(@"\\"))
{
footpath = footpath.Replace(@"\\", "/");
}
if (footpath.Contains("//"))
{
footpath = footpath.Replace("//", "/");
}
if (!headpath.EndsWith("/")) { headpath = headpath + "/"; }
return $"{headpath}{footpath}";
}
/// <summary>
/// 获取相对路径
/// </summary>
/// <param name="rootpath"></param>
/// <param name="fullpath"></param>
/// <returns></returns>
private string ReadRelativePath(string rootpath,string fullpath)
{
//Console.WriteLine($"{fullpath} ---> {rootpath}");
fullpath = fullpath.Replace(@"D:\","/");
//Console.WriteLine($"{fullpath} ---> {rootpath}");
if (!fullpath.StartsWith("/") && !fullpath.StartsWith(@"\"))
{
fullpath = "/"+fullpath;
}
if (fullpath.Contains(@"\"))
{
fullpath = fullpath.Replace(@"\","/");
}
if (!rootpath.StartsWith("/") && !rootpath.StartsWith(@"\"))
{
rootpath = "/" + rootpath;
}
if (rootpath.Contains(@"\"))
{
rootpath = rootpath.Replace(@"\", "/");
}
if (rootpath.Contains(@"\\"))
{
rootpath = rootpath.Replace(@"\\", "/");
}
if (rootpath.Contains("//"))
{
rootpath = rootpath.Replace("//", "/");
}
if (fullpath.Contains(@"\\"))
{
fullpath = fullpath.Replace(@"\\", "/");
}
if (fullpath.Contains("//"))
{
fullpath = fullpath.Replace("//", "/");
}
// //->/ \\->/
//以下判定还是 有BUG的
if (fullpath.Contains(rootpath))
{
var relapath = fullpath.Substring(rootpath.Length);
if(!relapath.StartsWith("/"))
{
relapath = "/" + relapath;
}
if (!relapath.EndsWith("/"))
{
relapath = relapath + "/";
}
//Console.WriteLine($"=== {fullpath} --- {rootpath} ===> {relapath}");
return relapath;
}
return fullpath;
}注意！！！ 以上路径都是在linux上的，如果用window需要改改，问题不大。