關於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