javascript - 如何触发我的 jquery 表单提交

Question

现在表单正在提交，但它使用默认 URL，我希望它在我的 javascript 中使用表单提交事件，以便它传递 .ajaxSubmit() 选项。

这是 JavaScript。

$('#selectedFile').change(function() {
    var id = $('#selectedFile').data('id');
    var options = {
        target: '#output',    
        beforeSubmit: showRequest,  
        success: showResponse,  

        url: '/ManageSpaces/UploadImage',
        data: { id: id },
        type:      'post'        
       
    };

    $("#imageform").trigger('submit'); // I want this to trigger the submit below! Not the default form submit.

    
    $('#imageform').submit(function () {
         
        $(this).ajaxSubmit(options);
        
        return false;
    });
});

<form id="imageform" enctype="multipart/form-data">
            <input type="file" id="selectedFile" style="display: none;" data-id='@Model.YogaSpaceId' />
            <input type="button" value="Add Photos" class="btn" id="pictureupload" />
        </form>

Action 方法

[HttpPost]
    public ActionResult UploadImage(int id, HttpPostedFileBase image)
    {
        //do some stuff to save the image

        return Json("Saved");
    }

Answer 1

您在注册提交处理程序之前触发提交，您的情况的一种选择是直接在更改处理程序中调用ajaxSubmit，而不使用提交处理程序，如下所示。

$('#selectedFile').change(function () {
    var id = $('#selectedFile').data('id');
    var options = {
        target: '#output',
        beforeSubmit: showRequest,
        success: showResponse,

        url: '/ManageSpaces/UploadImage',
        data: {
            id: id
        },
        type: 'post'

    };

    $('#imageform').ajaxSubmit(options);
});

<小时/>

另一种选择是在更改处理程序之外注册提交处理程序，如下所示，并在更改处理程序中触发提交

$('#selectedFile').change(function () {
    $("#imageform").trigger('submit'); // I want this to trigger the submit below! Not the default form submit.
});

$('#imageform').submit(function () {
    var id = $('#selectedFile').data('id');
    var options = {
        target: '#output',
        beforeSubmit: showRequest,
        success: showResponse,

        url: '/ManageSpaces/UploadImage',
        data: {
            id: id
        },
        type: 'post'

    };
    $(this).ajaxSubmit(options);
    return false;
});