在檔案輸入更改時，將帶有formdata的表單提交到php檔案并上傳影像檔案

我想在輸入更改功能上將 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”型別。

uj5u.com熱心網友回復：

該錯誤告訴您傳遞給的值new FormData()不是<form>元素。而不是傳遞this，選擇您的表單元素并將其傳遞給建構式。

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

uj5u.com熱心網友回復：

試試這個

  $("#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)
          {
          }
        });
   });

uj5u.com熱心網友回復：

我不明白你為什么要做一個正常的表單帖子并再次用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);
    }
  });
});

標籤：

上一篇：影像在彈出視窗中迭代多次

下一篇：無論布局如何，如何檢測jQuery中的按鍵？