フォーム入力タイプ 'ファイル'にJquery submit formを変更

Question

イメージ選択のベースにフォームを送信していますので、ファイル入力の変更によりフォームが送信されます。問題は、私と同じルートにリダイレクトされることです。

$('#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> 

注： laravel、

jQueryのコードを使用してvar profileImageForm = $("#profileImageForm")は、フォームがどのように配列になりうるかわからない配列を返します。profileImageForm[0].submit(function(e){}

フォーム送信のリダイレクトの理由を知りましたか？

Answer 1

を追加することでこれを防ぐことができます。 form.submit（）とform.on（ 'submit'、function（）{}）は異なります。 form.submit（）はフォームのみを送信し、パラメータは受け付けません。だから、提出のあなたの機能は無視されます。代わりに、コントローラは、単に文字列を返す使用

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

Answer 2

Laravelコントローラに問題がある可能性があります。ご使用のコントローラの復帰動作を確認してください。

Answer 3

あなたは、あなたのフォームを提出するが、イベントを提出聞いていませんe.stopPropagation()