1. 程式人生 > >h5特性formdata帶引數上傳檔案,上傳到node端

h5特性formdata帶引數上傳檔案,上傳到node端

html:

<input type="file" id="addpic"  multiple="multiple"/>
<button id="uploadpic" style="width: 100px;height: 100px;">btn</button>
js:
var btn=document.getElementById("uploadpic");
btn.onclick=function(){
    var datapic=new FormData();
       datapic.append("abc","33333333333333");    傳的引數abc 忘下看node服務端怎麼接收
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: "/add", data
: datapic, type: 'POST', async: false, cache: false, contentType: false, //這些引數要設定為false processData: false, success: function (result) { //處理函式 } }); }

node:

app.js:

app.all("/add",userCtrl.add);   userCtrl是js檔名
userCtrl.js:
var formidable=require("formidable"
); var fs=require("fs");
exports.add=function(req,res){
    var form = new formidable.IncomingForm();
    form.keepExtensions = true;
    form.uploadDir = "./avatar";
    form.multiples = true;
    form.maxFieldsSize = 50 * 1024 * 1024;
    form.parse(req, function(err, fields, files) {
var abc=fields.abc;   結果是33333333333333,接收到了傳來的引數,就是這樣,在fields裡
        for(var k in files)
        {
            fs.rename(files[k].path,"./avatar/"+files[k].name);
        }
        res.writeHead(200, {'Content-Type': 'text/html','Access-Control-Allow-Origin':'*','Accept-Encoding':'gzip, deflate, sdch'});



        res.end();
    });

}