nodejs+HTML5+express+mluter实现文件上传效果

快来打我* 2023-06-16 01:59 21阅读 0赞

1.HTML5请参考[菜鸟教程][Link 1]

2HTML页面代码

3.

<style type="text/css">
            .drop{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
        <script>
            function drop_hander(event){
                event.preventDefault();//阻止默认事件;
                var files = event.dataTransfer.files;//通过dataTransfer.files来获取文件对象的数组
                var formData=new FormData();
                console.log(formData);
                for (let i = 0,len=files.length;i<len; i++) {
                    console.log(files[i]);
                    formData.append("file",files[i]);  
                }
                var request = new XMLHttpRequest(); //创建XHR实例
                request.open('POST', '/process_post'); //初始化请求
                request.send(formData);//发送请求
            }
            function dragover_hander(event){
                event.preventDefault();
                /* 必须同时阻止dragover和drop的默认事件
                    否则会响应浏览器默认行为
                    浏览器能显示的文件会直接显示，例如html文件、图片文件
                     浏览器不能显示的文件会出现文件下载弹窗
                 */
            }
        </script>
    </head>
    <body>
        <div class="drop" ondrop="drop_hander(event)" ondragover="dragover_hander(event)">
    
        </div>
    </body>

服务器端的js代码

const express=require("express");
    const app=express();
    const multer=require("multer");
    //引入包文件
    const update=multer({dest:'uploads/'})
    /*
     新建一个multer中间件，设置文件保存路径
     路径必须存在，否则会报错
    */
    
    // 请求/drop.html,返回文件
    app.get('/drop.html',function(req,res){
        res.sendFile(__dirname+'/'+'drop.html');
    });
    
    /*
    创建提交接口，使用中间件处理，update.array（‘file’）上传一个名为file的文件数组
     */
    app.post('/process_post',update.array('file'),function(req,res,next){
        if (!req.files) { // 末上传文件的返回
            res.json({ ok: false });
            return;
          }
          //有上传文件,返回文件列表
          res.json(req.files) 
          return;
    });
    
    var server=app.listen(8081,function(){
        var host = server.address().address
        var port = server.address().port
        console.log("应用实例，访问地址为 http://%s:%s", host, port);
    })

[Link 1]: https://www.runoob.com/html/html5-draganddrop.html

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5实现大文件分片上传

上传大文件一直是个比较头疼的问题，一是上传时间长，中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于

柔情只为你懂/ 2024年03月16日 12:22/ 0 赞/ 126 阅读

相关 HTML5 文件上传

HTML5 文件上传另参考 http://www.jianshu.com/p/46e6e03a0d53 1 filelist对象与file对象： 1 <inpu

怼烎@/ 2023年08月17日 16:20/ 0 赞/ 240 阅读

相关 thinkphp5 文件上传

官网文档：[https://www.kancloud.cn/manual/thinkphp5/155159][https_www.kancloud.cn_manual_thin

妖狐艹你老母/ 2023年06月26日 13:29/ 0 赞/ 48 阅读

相关 nodejs+HTML5+express+mluter实现文件上传效果

1.HTML5请参考[菜鸟教程][Link 1] 2HTML页面代码 3. <style type="text/css"> .drop{

快来打我*/ 2023年06月16日 01:59/ 0 赞/ 22 阅读

相关 Servlet实现文件上传，可多文件上传

一、Servlet实现文件上传，需要添加第三方提供的jar包 1) [commons-fileupload-1.2.2-bin.zip][] : [点击打开链接

ゝ一世哀愁。/ 2022年08月03日 05:16/ 0 赞/ 401 阅读

相关 springmvc_5_文件上传&多文件上传

SpringMVC上下文中默认没有装配MultipartResolver，因此默认情况下其不能处理文件上传工作。如果想使用Spring的文件上传功能，则需要在上下文中配置Mul

雨点打透心脏的1/2处/ 2022年05月29日 09:18/ 0 赞/ 455 阅读

相关 TP5实现多文件上传

最近要实现多图片上传,折腾了很久,总结一下基本的步骤。首先前端代码: <form id="addform" action="Upload\_talent\_tablec

￡神魔★判官ぃ/ 2022年04月25日 08:02/ 0 赞/ 542 阅读

相关 thinkphp5文件上传

jq是网上链接的,thinkphp5是控制器里写的，不足之处多多指教不用submit直接按钮上传话不多说直接上代码 1.静态页面 <!DOCTYPE

一时失言乱红尘/ 2022年04月23日 04:30/ 0 赞/ 300 阅读

相关使用HTML5实现多文件上传

在Dojo1.6中有一个崭新的Multi-File Uploader (dojox.form.Uploader)，它具有一个可定制样式的file input按钮，可使用多文件选

我就是我/ 2022年04月16日 20:44/ 0 赞/ 995 阅读

相关 html5+FormData 实现ajax文件上传

大家都知道在html4时代，上传只能使用表单post提交方式，无法使用ajax(XMLHttpRequest )直接进行表单提交。但在HTML 5的概念形成后，W3C开始考虑标

女爷i/ 2021年06月24日 14:34/ 0 赞/ 593 阅读