3

美好的一天，我有一个用于将字段和文件发送到 node.js 服务器的表单。在服务器上，由Formidable解析的数据。一切正常，但是在提交表单后，它会加载一个带有响应的页面。有谁知道使用标准表单机制发送数据而不重新加载页面的方式（带有序列化的 jQuery ajax 方法由于表单中的文件而不起作用）或者在服务器上写入这样的响应，因此它不会触发页面重新加载。形式：

<form action="/upload" enctype="multipart/form-data" method="post" id="eventForm">
<label>Date</label>
<input type="text" name="date"/>
<label>Image</label>
<input type="file" multiple="multiple" name="picture" />
<input type="submit" value="Submit!" />
</form>

服务器端：

app.post('/upload', function (req, res) {
    var form = new formidable.IncomingForm();
    // save file code goes here 
    form.parse(req, function(err, fields, files) {
        //response code goes here
        res.send('done');
    });
});

有没有更好的方法来做到这一点？谢谢！

4

1 回答 1

8

感谢两位在评论中回答我的问题的人！他们的两种解决方案都有效，它们是：

1）最简单：在表单后添加不可见的 iframe 并将其指定为表单的目标：

<form action="/upload" enctype="multipart/form-data" method="post" id="eventForm" target="uploader_iframe">
//....
</form>
<iframe id="uploader_iframe" name="uploader_iframe" style="display: none;"></iframe>

2) 正确：其实用AJAX发送同样的数据并没有那么难，只需要指定一些参数就可以了。这是一个代码：

$('#eventForm').submit(function (e) {
        e.preventDefault();
        var fd = new FormData($(this)[0]);
        $.ajax({
            url: '/upload',
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                console.log(data);
            }
        });
});

谢谢两位评论员！使用他们的链接查找更多信息！

于 2014-03-05T02:25:12.837 回答