Jquery在表单输入类型“文件”更改上提交表单答案

【问题标题】：Jquery submit form on form input type 'file' changeJquery在表单输入类型“文件”更改上提交表单
【发布时间】：2017-03-09 04:25:21
【问题描述】：

我正在根据图像选择提交表单，因此文件输入更改将提交表单，问题是它会将我重定向回与我使用 laravel 相同的路线，

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){}

知道为什么表单提交重定向？

【问题讨论】：

标签： javascript php jquery html forms

【解决方案1】：

您正在提交表单，但没有收听提交事件。 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();

【讨论】：

【解决方案2】：

问题可能出在您的 Laravel 控制器中。请检查您的控制器的返回动作。

【讨论】：

控制器只返回一个字符串。'

【解决方案3】：

您可以通过添加 e.stopPropagation() 来防止这种情况发生

【讨论】：