Jquery在表單輸入類型'文件'中更改提交表單

我在圖像選擇的基礎上提交表單，因此文件輸入更改將提交表單，問題是它將我重定向回到與我相同的路由使用laravel，Jquery在表單輸入類型'文件'中更改提交表單

jQuery代碼：

$('#profile-image-upload').change(function(e){ 

    var profileImageForm = $("#profileImageForm"); 

    profileImageForm[0].submit(function(e){ 

     e.preventDefault(); 
     var file_data = $('#profile-image-upload').prop('files')[0]; 
     var form_data = new FormData(); 
     form_data.append('file', file_data); 

     $.ajax({ 
      url: "/freelance/change-profilePic", 
      data: form_data, 
      type: 'POST', 
      success: function (data) { 
       console.log('Success'); 
      }, 
      error: function (xhr, status, error) { 
       console.log('error'); 
      } 
     }); 
    }); 
});

HTML：

<div class="profile__img"> 
    <form id="profileImageForm" method="post" enctype="multipart/form-data"> 
     <input id="profile-image-upload" class="" name="file" type="file"> 
    </form> 

    <img src="{{asset('freelance/img/demo/people/3.jpg')}}" alt="" id="profile-image"> 
</div>

注：var profileImageForm = $("#profileImageForm")返回一個數組，我不知道如何一個窗體可以是一個數組，因此我提交表單如profileImageForm[0].submit(function(e){}

想知道爲什麼表單提交重定向？

來源

2017-03-08 Gammer

您提交您的形式，但不聽提交事件防止這一點。 form.submit（）和form.on（'submit'，function（）{}）是不同的。 form.submit（）只會提交你的表單並且不接受任何參數。所以你提交的函數被忽略。而不是使用

profileImageForm[0].submit(function(e){ });

使用

profileImageForm.on('submit', function(e){ 
    e.preventDefault(); 
    // 
    // your uploader code goes here; 
    // 
}).submit();

來源

2017-03-08 20:25:21

它的工作，謝謝隊友 – Gammer

問題可能出在您的Laravel控制器上。請檢查您的控制器的返回操作。

來源

2017-03-08 20:17:31

控制器只返回一個字符串「。 – Gammer

您可以通過添加e.stopPropagation()

來源

2017-03-08 20:18:13

不用工作，沒有運氣@AnisD – Gammer

Jquery在表單輸入類型'文件'中更改提交表單

回答

相關問題