在文件输入更改时，将带有 formdata 的表单提交到 php 文件并上传图像文件答案

【问题标题】：On file input change submit form with formdata to php file and upload image file在文件输入更改时，将带有 formdata 的表单提交到 php 文件并上传图像文件
【发布时间】：2022-01-15 01:59:13
【问题描述】：

我想在输入更改功能上将 formData 提交到我的 php 文件。但我无法让它工作，也许我想错了，有人可以帮帮我。

表单 HTML

  <form id="image1submit" action="website_refimage1_upload.php" method="post" enctype="multipart/form-data">
  <div class="image-upload">
  <label for="uploadImage1">
    <img class="user-image width100" src="<?php echo $image?>"/>
  </label>

  <input class="file-input" id="uploadImage1" type="file" accept="image/*" name="image1"  />
</div>
</form>

jQuery

    $("#uploadImage1").on('change',(function(e) {
  const form = $('#image1submit').get(0);
const formData = new FormData(form);
  //e.preventDefault();
  $('#image1submit').submit();

  //var file = $(this).val();
  $.ajax({
         url: "website_refimage1_upload.php",
   type: "POST",
   data:  formData,
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    //$("#err").fadeOut();
   },
   success: function(data)
      {
    if(data=='invalid')
    {
     // invalid file format.
     //$("#err").html("Invalid File !").fadeIn();
    }
    else
    {
     // view uploaded file.
     //$("#preview").html(data).fadeIn();
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    //$("#err").html(e).fadeIn();
      }          
    });
 }));

他给了我以下错误，也试图修复，但遗憾的是无法让它工作。

未捕获的 TypeError: 无法构造 'FormData': 参数 1 不是 'HTMLFormElement' 类型。

【问题讨论】：

请不要用提供的答案更新您的问题。答案现在没有任何意义，因为它不再回答任何问题。新问题应在单独的线程中打开。
好的，谢谢，我会记住的

标签： javascript jquery multipartform-data onchange form-data

【解决方案1】：

错误告诉您传递给new FormData() 的值不是<form> 元素。不要传递this，而是选择您的表单元素并将其传递给构造函数。

const form = $('#image1submit').get(0);
const formData = new FormData(form);

【讨论】：

好的，错误已经消失，谢谢伙计。但问题是没有从输入中获取任何数据，我猜就像在普通表单提交中一样
尝试删除$('#image1submit').submit(); 行。您手动提交导致页面重新加载的表单，这不是您需要的。
删除了该行但数组仍然为空...
什么数组？您指的是 website_refimage1_upload.php 中的 PHP 脚本吗？如果是这样，那么请务必将其包含在您的问题中。

【解决方案2】：

试试这个

  $("#uploadImage1").on('change',(function(e) {
        $('#image1submit').submit();
  });

  $('#image1submit').on('submit',function(event){
        event.preventDefault();

        $.ajax({
           url: "website_refimage1_upload.php",
           type: "POST",
           data:  new FormData(this),
           contentType: false,
          cache: false,
          processData:false,
          beforeSend : function()
          {
          },
          success:function(data)
          {
          }
        });
   });

【讨论】：

可悲的是什么都不做？
它对我有用，请尝试在发送前添加“ alert('Sending'); ”，如果它触发则它工作。

【解决方案3】：

我不明白你为什么要做一个普通的表单帖子，然后再用 ajax 发布它？

您可以尝试删除这段代码吗：$('#image1submit').submit();

您的代码的其余部分似乎没问题。

我还通过一些更改和控制台日志测试了您的代码，对我来说一切正常：


$("#uploadImage1").on("change", function (e) {
  const form = $("#image1submit").get(0);
  const formData = new FormData(form);
  //e.preventDefault();
  console.log(...formData);
  //$("#image1submit").submit();
  //var file = $(this).val();
  $.ajax({
    url: "http://google.com",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend: function () {
      //$("#preview").fadeOut();
      //$("#err").fadeOut();
    },
    success: function (data) {
      if (data == "invalid") {
        // invalid file format.
        //$("#err").html("Invalid File !").fadeIn();
      } else {
        // view uploaded file.
        //$("#preview").html(data).fadeIn();
        $("#form")[0].reset();
      }
    },
    error: function (e) {
      //$("#err").html(e).fadeIn();
      console.log('error:',e);
    }
  });
});

【讨论】：