c＃mvc Jquery Javascript如何使用一个以上的表单上传文件

Question

请帮助我，我如何在文本字段中使用多个Fileuploade

<form id="uploader" enctype="multipart/form-data">
    <input type="file" id="fileInput" /><br />  This is Single File
    <input type="file" id="fileInput1" multiple /><br /> Multipul File
  <b>Eneter Id </b> <input type="text" id="Id" /><br />  
  <b>Name</b>  <input type="text" id="Name" /><br />

    <input type="button" id="fileButton" value="Upload Files" /><br />
</form>

这是我的Javascript代码，当我删除文件时，它的工作状态是..请帮助我，如何添加文件

$(document).ready(function () {
        var apiBaseUrl = "http://localhost:50895/CsgFiles/";
        $("#fileButton").click(function (e) {
            debugger
            var fileform = document.getElementById('fileInput');
            var files = fileform.files;
            var fileform1 = document.getElementById('fileInput1');
            var files1 = fileform1.files;
            var abc = {
                Id: $("#Id").val().trim(),
                Name: $("#Name").val().trim(),
                File2: files,
                File1: files1,
            }
            var data = new FormData();   //From Here Please Help me How can i use
            data.append('File2', files)
            //Save
            $.ajax({
                url: apiBaseUrl + 'saveFiles',
                type: 'POST',
                dataType: 'json',
                data: data,
                cache: false,
                processData: false,
            }).done(function (data) {
                debugger

            }).fail(function (e) {
                debugger;
            });
        })
    })

Answer 1

当您从form的控件上载所有内容时，构建FormData对象的最简单方法是向构造函数提供form的引用，然后完成所有append()逻辑为了你。

还请注意，在处理表单时，您应该挂钩到表单本身的submit事件，而不是单击“提交”按钮。

最后，您还需要在contentType: false调用上包含$.ajax，以便jQuery设置正确的标头。

话虽如此，请尝试以下操作：

jQuery($ => {
  var apiBaseUrl = "http://localhost:50895/CsgFiles/";

  $("#uploader").on('submit', function(e) {
    e.preventDefault();
    var data = new FormData(this);

    $.ajax({
      url: apiBaseUrl + 'saveFiles',
      type: 'POST',
      dataType: 'json',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
    }).done(function(data) {
      debugger;
      console.log(data);
    }).fail(function(e) {
      debugger;
    });
  });
});

我也建议使用相对路径进行通话，例如：var apiBaseUrl = "/CsgFiles/";。这样，当在本地/开发/实时环境之间移动时，代码仍然可以工作。它还消除了使用不同协议的任何跨域事故的可能性。