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

请大家帮忙，这是一个主要的拦截器!

我有一个使用 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”时，文件确实会上传，但是控制台显示错误“Type has no method 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 )。