Question

我尝试在用户点击按钮时提交带有字段元素的表单。我正在使用change函数，该函数在选择文件后调用。问题是表单数据是在没有字段数据的情况下提交的。在设置字段数据后如何让它提交表单？

如果我使用submit而不是change来调用，则以下代码可以正常工作。

<form method="POST" action="public/index.php/students/edit/49" accept-charset="UTF-8" id="fileform" enctype="multipart/form-data">
    <input type="button" onclick="document.getElementById('fileupload').click();  return false;" value="UPLOAD CV / RESUME" class="add" />
    <input type="file" id="fileupload" style="visibility: hidden;" />
</form>

<script>
$('#fileupload').change(function()
{ 
    var formData = new FormData($(this)[0]);
    var request = $.ajax({
        type: "POST",
        processData: false,
        contentType: false,
        url: "{{URL::action('StudentController@addDocument')}}",
        data: formData,
    });

    request.done(function( msg ) {
      console.log( msg );
    });

    request.fail(function( jqXHR, textStatus ) {
      console.log(textStatus );
    });
});

</script>

Answer 1

你可以尝试

$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};

然后在函数ajax

var request = $.ajax({
    type: "POST",
    processData: false,
    contentType: false,
    url: "{{URL::action('StudentController@addDocument')}}",
    data: $('#fileform').serializefiles(),
});

你想通过ajax上传一个文件或一些文件，你必须写一个上面的函数

Answer 2

this中的{p> $('#fileupload').change( ... )引用了input元素，formData需要一个表单元素，试试这个：

$('#fileupload').change(function () {
    var formData = new FormData(this.form);

    ...

});

您还需要在文件输入中添加name属性。

请求看起来像：

...
Content-Disposition: form-data; name="file"; filename="FILE_NAME"
Content-Type: CONTENT_TYPE
...

jQuery：在变更时提交表单

2 个答案: