在节点（无可用ajax）中防止表单提交后页面重新加载

Question

您好，我有一个用于将字段和文件发送到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');
    });
});

有更好的方法吗？ 谢谢！

- Serg Nights

---

请查看此问题及其答案是否能对您有所帮助。明确一点，其中的答案是关于用Javascript或甚至JQuery解决它的。 - barry-johnson

请查看 http://blog.w3villa.com/programming/upload-image-without-submitting-form-works-on-all-browsers/ - Ishank Gupta

你做了什么？我看到你接受了答案，但我不知道它是否适用于我。 - Tenz

Answer 1

感谢在评论中回答我的问题的两位用户！他们提供的解决方案都有效，以下是它们：

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

谢谢两位评论员！使用他们提供的链接来了解更多！

- Serg Nights