h5特性formdata帶引數上傳檔案,上傳到node端
阿新 • • 發佈:2019-02-11
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(); }); }