如何从Ajax FormData.append访问变量?

时间:2017-03-01 23:25:57

标签: javascript jquery html ajax forms

我正在将上传的文件从我的HTML表单发送到我的服务器,并尝试向FormData()添加自定义属性,但它没有显示在我的服务器端。

我通过执行var formData = new FormData();添加自定义属性,然后通过 formData.append("airlinename",airline_name); 添加,但是一旦我在服务器端获取数据,我查看 req 对象,无法找到 airlinename 。如何访问自定义属性?

我能够很好地访问该文件,但我无法找到如何访问我追加到formData的自定义属性。

HTML表单

<form role="form">
    <input type="text"  id="load_db_name" name="load_db_name">
    <input type="file"  id="load_db_dir" name="load_db_dir">
</form>
<button id="load_generateDiagram" onClick="loadPastDiagram();" type="button">Load</button>

客户端JS

function loadPastDiagram()
{   
    var db_dir = document.getElementById('load_db_dir').files[0] || null;
    var _files = [db_dir];
    var airline_name = document.getElementById('load_db_name').value.trim();
    loadDiagram(airline_name,_files);
}

function loadDiagram(airline_name, files)
{
    var formData = new FormData();
        for (var f in files) {
            formData.append("files", files[f]);
        }
        formData.append("airlinename",airline_name); //<--- can't find this on the server side
        $.ajax({
            url: '/loadDiagram', 
            type: 'POST',
            success: function(res) {
                console.log("Success");
            },
            error: function(err) {
                console.log("Error ",err);
            },
            data: formData,

            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
        });
}

Server JS

app.post('/loadDiagram', function(req,res){
    console.log("[FILES]" + JSON.stringify(req.airlinename));
    console.log("[FILES]" + JSON.stringify(req.files.airlinename));
    console.log("[FILES]" + JSON.stringify(req.files.files));
});

输出

[DEV]  [FILES]undefined
[DEV]  [FILES]undefined
[DEV]  [FILES]{
    "fieldName": "files",
    "originalFilename": "Tool_fresshhh.tar.gz",
    "path": "../Output-Files/2833-fwh0ql.tf9od2t9.gz",
    "headers": {
        "content-disposition": "form-data; name=\"files\"; filename=\"Tool_fresshhh.tar.gz\"",
        "content-type": "application/x-gzip"
    },
    "ws": {
        "_writableState": {
            "objectMode": false,
            "highWaterMark": 16384,
            "needDrain": true,
            "ending": true,
            "ended": true,
            "finished": true,
            "decodeStrings": true,
            "defaultEncoding": "utf8",
            "length": 0,
            "writing": false,
            "corked": 0,
            "sync": false,
            "bufferProcessing": false,
            "writecb": null,
            "writelen": 0,
            "bufferedRequest": null,
            "lastBufferedRequest": null,
            "pendingcb": 0,
            "prefinished": true,
            "errorEmitted": false,
            "bufferedRequestCount": 0,
            "corkedRequestsFree": {
                "next": {
                    "next": null,
                    "entry": null
                },
                "entry": null
            }
        },
        "writable": false,
        "domain": null,
        "_events": {
            "error": [null],
            "close": [null]
        },
        "_eventsCount": 2,
        "path": "../Output-Files/2833-fwh0ql.tf9od2t9.gz",
        "fd": null,
        "flags": "w",
        "mode": 438,
        "autoClose": true,
        "bytesWritten": 449781,
        "closed": true
    },
    "size": 449781,
    "name": "Tool_fresshhh.tar.gz",
    "type": "application/x-gzip"
}

版本

  • jQuery v1.11.1
  • 快递版:3.14.0
  • 节点版本:v6.5.0

1 个答案:

答案 0 :(得分:1)

我知道这是“不酷”......

但是我看到这个问题,因为它是在1个多小时前发布的,并且看到(非常快!!)作为评论发布的解决方案。 我等他或她发布它,所以我可以学到一些东西。

但是因为Jaromanda X实际上是在5分钟前最后一次见到而没有发布答案......

我猜他或她对代表并不感兴趣。分!
所以只是将这个问题标记为已回答...... ;)

服务器JS

app.post('/loadDiagram', function(req,res){
    console.log("[FILES]" + JSON.stringify(req.body.airlinename));    // <-- 
    console.log("[FILES]" + JSON.stringify(req.files.files));
});

«第一个发布它,得到它! »