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

Question

请帮帮忙,这个是一个主要的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);
        }
    });
});

不会调用success函数(这意味着警报消息不会显示).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;
    }

--Update--

如果我这样做$.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. 

Answer 1

根据您的评论：

“感谢您的建议。$.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()不需要任何参数（不过，如果需要，您可以传入选项）。因为我没有传入参数，所以附加了回调，在本例中使用doneand fail（而不是successand error）。