HTML5拖拽文件夹上传

已于 2022-08-17 17:21:34 修改
阅读量707 收藏
点赞数
分类专栏： jquery 前端 文章标签： html5 webview html
于 2022-05-27 10:18:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Apeart/article/details/124998767
版权 
<!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需要改改，问题不大。

PasteSpider
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML实现文件上传和HTML实现打开文件目录
u014331212的博客
02-12 6829
这里需要注意两个地方： 表单提交方式需要是post form 添加一个属性为enctype="multipart/form-data" 在 index.html 加入input 标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ...
HTML如何把文件上传到指定目录下
热门推荐
fhx308050的博客
02-01 1万+
HTML如何把文件上传到指定目录下 最近在做练习时都有把图片路径保存到数据库的要求，因为是新建动态项目，所以图片都必须保存在项目里的WebContent文件下的images文件夹中，这样读取数据库中图片路径时才有图片显示。因此在HTML上传到后台接 收时，又要把接收到的文件或图片复制到项目下面，要不然就没显示。所以自己总结了下怎么样把文件上传到 指定文件目录下，感觉还挺实用的，别人通过局域网
vue2 + element-ui + 推拽上传文件夹获取文件数据
最新发布
weixin_52489038的博客
05-11 658
vue2 + element-ui + 推拽上传文件夹获取文件数据
html5 上传文件夹,通过HTML5实现多文件上传以及本地预览
weixin_42626599的博客
06-07 959
在HTML5之前，通过一次只能上传一个文件，大部分多文件上传都是通过flash实现得(听说得，我没用过)，但是有了HTML5，多文件上传变得非常简单，并且可以本地预览。之前写过一个模仿QQ风格的移动端表单，支持多文件上传(图片)，并且可以本地预览。已放在GitHub[感兴趣的点这里]，没有维护，对它的外观不要介意。多文件上传说了这么多，多文件上传要怎么实现呢？var Upload=document...
文件上传简介1---上传到指定的目录3
孤雁是天的寂寞
05-08 173
本节摘要：前面介绍了文件上传到目录，本节是对uoload.html前面前台做了一定的修改，加了一些校验在前台。修改后的upload.html文件如下： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt...
人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、FormData)
kopolwu的专栏
02-06 1176
http://fed.renren.com/archives/391 早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。本文将重点介绍实现拖拽上传的几个HTML5技术：Drag&Drop、FileReader API和FormData。 　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖
html 图片拖拽上传图片,html5拖拽上传图片实例演示
weixin_29962351的博客
06-04 678
因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就变成这么一个实例，一起来看下吧(地址不能保证长久有效，如果不能请在文章最后点击demo下载)：界面样式我是参考了一个国外的相册网站，放置不大，，只是把鸟语转换成中文，以及上传时的样式也进行了缩放，之所以选这个的原因就是，我很容易做扩展，它支持3...
HTML5 拖拽批量上传文件的示例代码
09-28
总之，实现HTML5拖拽批量上传文件夹的功能涉及了HTML5的拖放API、文件系统接口、Vue.js组件开发以及跨域策略等多个技术点。通过细致的设计和编程，我们可以创建出高效、友好的文件上传体验。在实际开发中，还需要...
jQuery+html5拖拽上传图片预览代码.zip
09-27
《jQuery+HTML5拖拽上传图片预览技术详解》 在现代网页开发中，用户交互体验的提升成为了不可或缺的一部分，而拖拽上传功能正是这种体验的体现之一。本篇文章将详细解析一个基于jQuery和HTML5的图片拖拽上传并预览...
html5文件上传插件
02-10
5. **拖放功能**：HTML5支持文件拖放操作，用户可以直接从桌面或文件夹拖动文件到网页指定区域进行上传。 6. **跨域上传**：通过设置CORS（Cross-Origin Resource Sharing）策略，可以实现跨域文件上传。 ...
html5微信手机端图片上传裁剪代码.zip
09-27
"html5微信手机端图片上传裁剪代码.zip"这个压缩包文件，显然包含了实现微信手机端图片上传和裁剪功能的代码。 首先，`index.html`是网页的主文件，它定义了网页的结构和内容。在这个项目中，`index.html`应该包含...
HTML5 CSS3 ：无插件拖拽上传图片实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/31513065 有问题博客中留言
纯HTML5文件上传
cukengwei3786的博客
08-05 460
Pure HTML5 file upload HTML5 upload tutorial: today we will develop a great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but t...
html5大文件上传技术
aryasei的专栏
02-13 1936
html5大文件上传技术 引言 普通html表单在上传几KB或几MB级别的文件基本无压力，但在上传上百MB甚至是GB级别大文件很无爱。而且一般服务器单个文件上传限制基本都在几MB之内。如何有效突破限制，上传大文件技术值得深入探讨。 html5大文件上传技术 一般解决方案 html5文件分割上传解决方案 代码实现 运行截图 上传文件相关问题讨论 安全问题 用户体验优化 上传性能优化 一般解决方案...
html5 拖拽 （二）
shentibeitaokong的博客
08-01 974
做一个简单的拖拽排序吧，参考了网上的各种资料，自己写了一个，加深对拖拽的理解 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;demo4&lt;/title&gt; &lt;style&gt; .demo { heigh
基于html5目录上传
qq_23924929的博客
03-06 1132
由于公司项目的需求，需要实现将目录下的文件上传到服务器，而百度了n多方法后，大部分是基于js实现，而且局限性很大，基本只能在ie上运行，而公司一般都用谷歌，所以就想换种方式实现，然后参考了百度云盘，发现html5有可以选择目录的功能。 代码示例：<html> <form> <input id="fileId" type='file' multiple webkitdirec
html5文件上传
匪鉴
03-18 3646
作为H5的一部分，web存储得到了很好的支持，但不是存取数据的唯一方式，为了实现与存储相关的不同任务，也出现了其他几种不同的标准，其中一个就是File API，从技术角度讲他并不是h5的规范内容，但是现在的浏览器却是有着较好的支持，当然IE除外。1.用input读取文本文件<!DOCTYPE html> <html> <head> <title>h5文件上传</title> <meta name="
Html5开发 之 文件上传
z_x_Qiang的博客
04-01 523
Html： <div> <form enctype="multipart/form-data" action="upload/" method="POST" target="hidden_frame_apk"> <input type="file" name="file"/> ...
前端实现iOS拖拽上传文件夹
05-27
前端实现iOS拖拽上传文件夹可以通过使用HTML5中的拖放API来实现。以下是基本的实现步骤： 1. 创建一个<div id="drop-area">元素，用于接受拖拽上传的文件夹。 2. 监听该元素的dragover和drop事件，分别处理文件拖拽和文件上传操作。 3. 在dragover事件处理函数中，阻止浏览器默认的拖拽行为。 4. 在drop事件处理函数中，获取拖拽上传的文件夹中的所有文件。 5. 将文件转换成FormData对象，并使用XMLHttpRequest对象将其发送到服务器。 下面是一个简单的示例代码，用于拖拽上传文件夹： ```html <div id="drop-area">将文件夹拖拽到此处上传</div> <script> var dropArea = document.getElementById('drop-area'); dropArea.addEventListener('dragover', function(event) { event.preventDefault(); dropArea.classList.add('drag-over'); }); dropArea.addEventListener('dragleave', function(event) { dropArea.classList.remove('drag-over'); }); dropArea.addEventListener('drop', function(event) { event.preventDefault(); dropArea.classList.remove('drag-over'); var files = event.dataTransfer.items; if (!files.length) { alert('请选择文件夹！'); return; } var formData = new FormData(); for (var i = 0; i < files.length; i++) { if (files[i].kind === 'file') { var file = files[i].getAsFile(); formData.append('files[]', file); } } var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { alert('上传成功！'); } else { alert('上传失败！'); } }; xhr.send(formData); }); </script> ``` 需要注意的是，拖拽上传文件夹时需要将文件夹下的所有文件转换成FormData对象，并使用XMLHttpRequest对象将其发送到服务器。在示例代码中，我使用了FormData对象的append方法来添加文件到表单中，使用XMLHttpRequest对象的open和send方法将表单发送到服务器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值