使用POST的JQuery表单插件文件上传重定向到POST响应

请帮助大家，这是一个主要的BLOCKER!

我有一个使用NodeJS + jQuery Form Plugin + Typescript的项目，我试图在其中进行文件上传。上传文件后，服务器将发送响应到POST消息，该消息将显示在屏幕上。在屏幕上显示POST响应之前，文件确实已成功且完全上传。我希望POST响应调用“成功”功能，而不是将页面重定向到显示JSON响应。

这是代码:

$(new ID().setAsRoot().selectId()).append(
    "<form id=\"fileUploadForm\" accept-charset=\"utf-8\" method=\"post\" action=\"/upload\" enctype=\"multipart/form-data\">" +
        "<input id = \"filename\" type=\"file\" name=\"userfile\" multiple=\"multiple\" />" +
        "<button type=\"submit\" id = \"submitButton\"> Upload </button></form>");

var form = $("#fileUploadForm");
form.submit(function (e) {
    //e.preventDefault();
    this.ajaxSubmit({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function (data) {
            var x = JSON.parse(data);
            alert("Success : " + x);
        },
        error: function (data) {
            var x = JSON.parse(data);
            alert("Error : " + x);
        }
    });
});

成功函数不会被调用(这意味着警报消息不会显示)。 JSON数据仅在屏幕上呈现，如下所示:

{
  "path": "data\\cb3409f1cc234ec3f64b60d80be13a3e.html",
  "name": "feed.html"
}

控制台上显示以下错误:

Uncaught SyntaxError: Unexpected token : shortcut_manager.js:123
(anonymous function) shortcut_manager.js:123
(anonymous function) extensions::messaging:327
Event.dispatchToListener extensions::event_bindings:386
Event.dispatch_ extensions::event_bindings:371
Event.dispatch extensions::event_bindings:392
dispatchOnMessage

这是处理它的服务器端代码。服务器使用NodeJS强大的模块。

public upload(req:express.Request, res) {

        var form = new formidable.IncomingForm();
        var originalFileName:String;
        var filePath:String;
        form.uploadDir = this.directory;
        form.keepExtensions = true;
        form.type = 'multipart';
        var fields = [];
        form
            .on("error", function (err) {
            })
            .on("field", function (field, value) {
            })
            .on("end", function () {
                res.send({
                    path: filePath,
                    name: originalFileName
                });
            })
            .on("file", function (name, file:formidable.File) {
                originalFileName = file.name;
                filePath = file.path;
            });
        form.parse(req);
        return;
    }

- 更新 -

如果我做$.ajax而不是this.ajax。该文件未上传。浏览器控制台显示错误:

XMLHttpRequest cannot load http://localhost/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

最佳答案

根据您的评论:

“感谢您的建议。$。ajax根本不会加载。它显示了您可能知道的错误。尽管您的怀疑是正确的，因为当我使用“this.ajax”时，文件确实被上传了，但控制台显示错误“类型没有方法ajax”

您不能使用$.ajax()来上传文件，就像通常上传表单数据一样。

由于使用this.ajax时发生错误，因此提交了表单。这就是为什么您在浏览器中看到JSON响应的原因。

问题是this.ajax来自哪里？您是否从使用未包含的库的示例中复制了代码？

为了通过AJAX上传文件，您需要某种插件(自己动手会很费力，尤其是在需要支持旧版浏览器的情况下)。

更新

提交处理程序应如下所示:

form.submit(function (e) {
  e.preventDefault();
  $(this).ajaxSubmit().done(function (data) {
    var x = JSON.parse(data);
    alert("Success : " + x);
  }).fail(function (data) {
    var x = JSON.parse(data);
    alert("Error : " + x);
  });
});

说明:由于要调用jQuery插件，因此需要jQuery对象，即$(this)。 ajaxSubmit()不需要任何参数(不过，您可以根据需要传递选项)。因为我没有传递参数，所以在回调中附加了done和fail(而不是success和error)。

关于使用POST的JQuery表单插件文件上传重定向到POST响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20729645/