ajax上傳文件及nodeJS接收

時間 2020-05-22

標籤 ajax 上傳文件 nodejs 接收欄目 Ajax 简体版

原文原文鏈接

ajax文件上傳須要用到FormDatahtml

官方介紹node

FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。若是表單enctype屬性設爲multipart/form-data ，則會使用表單的submit()方法來發送數據，從而，發送數據具備一樣形式。jquery

連接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objectsajax

本身寫的簡單實例：npm

html部分：json

<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部分代碼：post

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'); } }); }); }); }); } });