ajax文件上傳需要用到FormData
官方介紹
FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。如果表單enctype屬性設為multipart/form-data ，則會使用表單的submit()方法來發送數據，從而，發送數據具有同樣形式。
鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
自己寫的簡單實例：
html部分：
<body> <form action="/" enctype="multipart/form-data" id="form"> 姓名：<input type="text" name="username" id=""><br> 年齡：<input type="text" name="age" id=""><br> <br> 本人照片：<input type="file" name="img" id="" value="選擇照片"><br><br> <input type="button" value="確認提交" name="btn" id="btn"> </form> </body> <script src="./jquery.js"></script> <script> $('#btn').click(function(){ // 利用formData將整個表單數據打包 var inpData = new FormData(document.getElementById('form')); $.ajax({ url:'http://soul:7777/file', type:'post', contentType: false, data:inpData,// 打成的數據包可以直接通過send發送 processData: false, success:function(data){ if(data){ alert('成功') }else{ alert('失敗') } } }) }) </script>
js服務端接收文件需要用到formidable模塊，幫助我們處理文件等數據；
js部分代碼：
var http = require('http'); var fs = require('fs'); var server = http.createServer(); server.listen('7777', function () { console.log('歡迎來到6的世界'); }); server.on('request', function (req, res) { res.setHeader('Access-Control-Allow-Origin','*'); if (req.url == '/file') { var fd = require('C:/Users/Administrator/AppData/Roaming/npm/node_modules/formidable'); var form = new fd.IncomingForm(); // 如果文件移動跨盤符依然需要提前設置上傳文件的路徑，默認在c盤 form.uploadDir = 'E:/img'; form.parse(req, function (err, fields, files) { // console.log(filds); // 表單數據 // console.log(files); // 上傳文件的數據 // 需要將上傳后的文件移動到指定目錄 fs.rename(files.img.path, './img/' + files.img.name, function (err) { // 獲取json數據進行解析 fs.readFile('./db.json', 'utf8', function (err, json_str) { var json_arr = JSON.parse(json_str); // 組裝新數據 // id 獲取數組中最后一個元素的id+1,就是新數組的id值 fields.id = json_arr[json_arr.length - 1].id + 1; // 將已經移動好的圖片地址加到新數據里面 fields.img = '/img/' + files.img.name; // 將新數據加入數組中 json_arr.push(fields); // 將數組重新轉為字符串寫入josn文件 fs.writeFile('./db.json', JSON.stringify(json_arr), function (err) { if (!err) { // 返回提示信息 res.end('1'); } else { res.end('0'); } }); }); }); }); } });
多文件上傳需要在input：file 標簽添加屬性multiple="multiple"（網上看到的）
小結一下：
ajax上傳文件關鍵在於formdata對象的使用，服務端技術關鍵在於formidable模塊對數據進行處理，然后對json文件進行增刪改。