如何使用jquery序列化进行文件上传

Question

所以我有一个表单,我使用jquery序列化函数通过ajax提交表单

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",
        cache   : false,
        url     : "blah",
        data        : serialized,
        success: function(data) {

        }

但是如果表单有一个<input type="file">字段怎么办....如何使用这个ajax序列化方法将文件传递给表单...打印$ _FILES不输出任何内容

Answer 1

无法使用AJAX上传文件,因为您无法访问存储在客户端计算机上的文件内容并使用javascript将其发送到请求中.实现此目的的技巧之一是使用隐藏的iframe.有一个很好的jquery表单插件,允许您AJAXify您的表单,它也支持文件上传.因此,使用此插件,您的代码将如下所示:

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

该插件自动负责订阅submit表单事件,取消默认提交,序列化值,使用正确的方法和处理文件上载字段,...

Answer 2

您现在可以使用Ajax上传文件!

例子:

/sf/answers/613103011/

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Answer 3

它适用于任何类型的表单

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        

});

Answer 4

   var form = $('#job-request-form')[0];
        var formData = new FormData(form);
        event.preventDefault();
        $.ajax({
            url: "/send_resume/", // the endpoint
            type: "POST", // http method
            processData: false,
            contentType: false,
            data: formData,

它对我有用!只需设置processData和contentType False即可.

Answer 5

您可以使用FormData方法通过AJAX上传文件.虽然IE7,8和9不支持FormData功能.

$.ajax({
    url: "ajax.php", 
    type: "POST",             
    data: new FormData('form'),
    contentType: false,       
    cache: false,             
    processData:false, 
    success: function(data) {
        $("#response").html(data);
    }
});

Answer 6

HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
    <input id="name" name="name" placeholder="Enter Name" type="text" value="">
    <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
    <select name="gender" id="gender">
        <option value="male" selected="selected">Male</option>
        <option value="female">Female</option>
    </select>
    <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>

JavaScript的

var data = new FormData();

//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
    data.append(input.name, input.value);
});

//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
    data.append("my_images[]", file_data[i]);
}

//Custom data
data.append('key', 'value');

$.ajax({
    url: "URL",
    method: "post",
    processData: false,
    contentType: false,
    data: data,
    success: function (data) {
        //success
    },
    error: function (e) {
        //error
    }
});

PHP

<?php
    echo '<pre>';
    print_r($_POST);
    print_r($_FILES);
    echo '</pre>';
    die();
?>

Answer 7

$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
    type: "POST",
    data: formData,
    dataType: "json",
    url: form.attr('action'),
    processData: false,
    contentType: false,
    success: function(data) {
         alert('Sucess! Form data posted with file type of input also!');
    }
)};});

通过使用new FormData()和设置processData: false, contentType:falseajax调用，使用文件输入形式提交表单对我有用

使用上述代码，我也可以通过Ajax提交带有文件字段的表单数据