选择时上传文件答案

【问题标题】：Upload files when it selected选择时上传文件
【发布时间】：2021-06-18 13:52:03
【问题描述】：

我正在尝试创建一个输入字段。当我选择文件时我想要它，它会自动上传它们而无需按任何上传按钮。这是我的代码。不提 CSS，因为它无关紧要。但如果你需要，我会提供。

//html

<!-- some codes here-->
<input type="file" id="fileUpload" multiple="true" />
<!-- some codes here-->

//javascript

$(document).ready(() => {
  $("#fileUpload").on("change", (e)=>{
    var formData = new FormData();
    var files = e.originalEvent.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
      formData.append("file[]", files[i]);
    }
    uploadFormData(formData);
  });

  function uploadFormData(form_data) {
    $.ajax({
      url: ".uploader.php",
      method: "POST",
      data: form_data,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data) {
        $("#filenames").html(data);
        $(".alert-container div").removeClass("alert-box alert-err");
        $(".alert-container div").addClass("alert-box alert-ok");
        $("#alertCheck").prop( "checked", true );
        setTimeout(()=>{
          $("#alertCheck").prop( "checked", false );
        }, 5000);
      },
      error: function (data) {
        $(".alert-container div").removeClass("alert-box alert-ok");
        $(".alert-container div").addClass("alert-box alert-err");
        console.log("err");
      },
    });
  }
});

【问题讨论】：

您有具体问题吗？我能看到的唯一问题是e.originalEvent.dataTransfer.files 应该是e.target.files。
它有效。谢谢。实际上，我只是想将拖放上传修改为选择和上传。就是这样。
很高兴它有帮助。我添加它作为你的答案

标签： javascript php html jquery ajax

【解决方案1】：

问题是由于您从事件中访问 files 集合的方式所致。您现在使用的代码适用于自定义 jQueryUI 事件处理程序，但您使用的是标准的 change 事件处理程序。因此，您需要更改此行：

var files = e.originalEvent.dataTransfer.files;

到这里：

var files = e.target.files;

【讨论】：

【解决方案2】：

这行得通吗？ var files = $("#fileUpload").prop('files');

【讨论】：

它也可以。我希望我能接受这两个答案。