JQuery Ajax从客户端上传文件和其他值[重复]

Posted 2023-04-13

【中文标题】JQuery Ajax从客户端上传文件和其他值[重复]

【英文标题】：JQuery Ajax uploading a file and other values from client side [duplicate]

【发布时间】：2016-06-17 10:16:05

【问题描述】：

我需要将文件上传到服务器并发送 GUID 值，这两者都需要完成操作。

是否可以用一个$.ajax 声明同时发送两者？

这是我正在使用的 Upload 操作方法的 sn-p

[HttpPost]
public ActionResult Upload()

  HttpPostedFileBase file = Request.Files[0];

这是我用来将文件发送到服务器的 javascript 代码的 sn-p

function upload() 
  var formData = new FormData();
  var totalFiles = document.getElementById("FileUpload").files.length;

  for (var i = 0; i < totalFiles; i++) 
    var file = document.getElementById("FileUpload").files[i];

    formData.append("FileUpload", file);
  

  $.ajax(
    type: 'post',
    url: '/myController/Upload',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) 
      alert('succes!!');
    ,
    error: function (error) 
      alert("errror");
    
  );

这段代码运行良好。该文件按预期上传，但现在我需要将GUID 发送到同一个控制器（上传）所以我想知道我是否可以在同一个$.ajax 语句中发送带有文件的GUID？

【问题讨论】：

formData.append('myGuid', '[GUID value here..]');

看看这个***.com/questions/34603739/…

是的，你可以用formData中的文件发送字符串，如上面Rory所示，你需要做的就是附加数据

谢谢你们的快速回答

【参考方案1】：

function upload() 
  var formData = new FormData();
  var totalFiles = document.getElementById("FileUpload").files.length;

  for (var i = 0; i < totalFiles; i++) 
    var file = document.getElementById("FileUpload").files[i];

    formData.append("FileUpload", file);
formData.append("guid", theGuid);
  

  $.ajax(
    type: 'post',
    url: '/myController/Upload',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) 
      alert('succes!!');
    ,
    error: function (error) 
      alert("errror");
    
  );

在服务器端：

Request.Form["guid"];
Request.Files["FileUpload"];

【讨论】：

如何管理上传控制器中发送的数据？当我在控制器中检查 Request.Files 的值时，只有一个值“FileUpload”如何访问附加到 formData 的“guid”值？

@vcRobe 我编辑了我的代码，看看它

感谢您的快速回答。它有效！

最佳且非常清晰的答案之一，也可在 MVC Core 2.2 上运行