带有文件上传的 jQuery AJAX 帖子

Posted 2023-05-09

【中文标题】带有文件上传的 jQuery AJAX 帖子

【英文标题】：jQuery AJAX post with fileupload

【发布时间】：2011-04-24 23:01:09

【问题描述】：

我有一个功能页面将数据发布到页面 WebMethod

[WebMethod()]
public static string sayHello(string pTest, string pText)

  return pTest + " - " + pText;

我用这个 jQuery 调用它

$(document).ready(function () 
  $("#sayHelloButton").click(function (event) 
    var name = $('#name').val();
    var text = $('#text').val(); 
    var dataString = JSON.stringify(
      pTest: name,
      pText: text
    ); 

    $.ajax(
      type: "POST",
      url: "page.aspx/sayHello",
      contentType: "application/json; charset=utf-8",
      data: dataString,
      dataType: "json",
      success: AjaxSucceeded,
      error: AjaxFailed,
      beforeSend: AjaxStart,
      complete: AjaxEnd
    );
  );
);

但是现在应该也可以上传文件了，我有点迷茫了。

从我在这里的不同帖子中看到的内容来看，这是不可能的，但如果我错了，请纠正我 - 但我已经看到了几个可以上传的 jQuery 插件，例如通过 Flash 脚本，但如何才能一键发布数据和上传？有没有人对哪个上传插件最好有任何建议 - 以及我如何在一个操作中成功上传和发布？

【参考方案1】：

无法判断所有插件，但我使用 jQuery Form 没有任何问题。不涉及 Flash，它只是创建隐藏的 iframe。

Here's a demo.

但是如何才能一键发布数据和上传数据 该过程与普通的ajax请求相同。你声明了一个表单元素，但不是$('#myform').submit(); 而是$('#myform').ajaxSubmit()。

【讨论】：

如果我错了请纠正我，但如果我按照你的建议做并且我使用只有 1 个表单标签的 ASP.NET，我猜它会提交很多不相关的东西（例如视图状态和元素属于页面的另一部分）使操作变慢并且我不能像我的示例中那样针对具有特定参数的 WebMethod？

@keyssersoze 默认情况下是的。我会尝试从 javascript 创建一个隐藏表单并将您的文件输入附加到它（临时）。但从来没有解决这个问题，所以不能保证。

【参考方案2】：

假设sayHelloButton 是您用于上传文件的表单上的提交按钮的ID，请务必在您的$("#sayHelloButton").click() 函数中添加：event.preventDefault(); 或在表单上使用javascript.void(); 以防止浏览器使用其默认行为发布数据。否则，您的 ajax 代码将永远不会执行。

$("#sayHelloButton").click(function (event) 
event.preventDefault();
var name = $('#name').val();
var text = $('#text').val(); 
var dataString = JSON.stringify(
  pTest: name,
  pText: text
);