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在表单输入类型'文件'中更改提交表单

回答

相关问题