nodejs多个文件上传问题的解决办法

 

关于多个文件上传的表单有多中方法：

1）基本的表单上传

 

<form action="/fileupload" enctype="multipart/form-data">
  选择一个文件: <input type="file" name="file">
  <input type="submit">
</form>

多个文件的话enctype="multipart/form-data"这个一定要有。

 

这种情况的话点击submit按钮就会自动提交file到后台，使用nodejs来保存文件的话一般使用formidable这个模块

npm install formidable --save   安装此模块

var formidable = require('formidable');     引用此模块

我们需要在对应的后台路由或者处理fileupload的js文件方法中来使用上述模块获取上传的文件

var form = new formidable.IncomingForm();     初始化这个模块

form.keepExtensions = true;
    form.uploadDir = "./tempdir";
   form.multiples = true;
   form.maxFieldsSize = 50 * 1024 * 1024;         参数设置 可以参考文档https://github.com/felixge/node-formidable   里面设置相应参数

form.parse(request, function(err, fields, files) {           //使用这个函数来获取文件

//这里可以使用两种方法来获取文件，1、nodejs是事件驱动机制，可以使用form.on("file",function(){})来处理。文件接收到触发事件  2、对接收文件进行遍历（本文使用）

for(var k in files)
      {        //文件的重定向 存到服务器上
         fs.rename(files[k].path,"./files/"+files[k].name);      //很多文件的时候使用for in循环来进行遍历 此时 k是files对象的某个索引 或者是后面提到的FormData.append的名字

      }
         response.writeHead(200, {'Content-Type': 'text/html','Access-Control-Allow-Origin':'*','Accept-Encoding':'gzip, deflate, sdch'});
        response.end();

}）;   

 

2）ajax异步表单提交多个文件

<input id="addpic" name="picupload" type="file" multiple="multiple" style=""></input>

<input id="uploadpic" type="button" value=" 上 传 "></input>

只需要一个文件表单和提交按钮即可，

首先使用FormData对象来收集所有文件，

 var datapic=new FormData();
    for(var k=0;k<document.getElementById("addpic").files.length;k++)
    {
      datapic.append("myfile"+k, document.getElementById("addpic").files[k]);     //第一个参数是文件实例名，可以再后台作为files的引用来遍历所有文件  第二个是文件实例
    }

//使用JS来遍历files文件，并添加到FormData实例中，同时赋予名字"myfile"+k,

 $.ajax({url:"/ajax/uploadpic",
  data:datapic,
      type: 'POST',
          async: false,
          cache: false,
          contentType: false,    //这些参数要设置为false 
          processData: false,
          success:function(result){  

//处理函数

}）；

这里jquery也可以获取文件 不过要使用prop这个方法

 

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

 

var files=$('[name="picupload"]').prop("files")这样将返回filelist对象。可以使用files[0]或者files.length来遍历

或者下面这种：

 

var selectedFile = $('#input').get(0).files[0]；
var selectedFile = $('#input')[0].files[0];

 

 

后端的操作就是和之前一样，使用formidable来进行文件的保存。

参考文章：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects 

http://www.yiibai.com/nodejs/nodejs_ch1627.html

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

https://github.com/felixge/node-formidable