Bir formda veri ve Ajax kullanarak dosyaları yüklemek?

SORU

5 HAZİRAN 2012, Salı

Bir formda veri ve Ajax kullanarak dosyaları yüklemek?

Benim form verileri ve dosyaları göndermek için jQuery ve Ajax kullanıyorum ama bir form veri ve dosyaları göndermek için nasıl emin değilim?

Ben şu anda her iki yöntem ile aynı neredeyse ama hangi verileri bir diziye toplanmış şekli farklıdır, veri .serialize(); kullanır fakat dosyalar = new FormData($(this)[0]); kullanın

Her iki yöntem Ajax ile bir form dosyaları ve veri yükleme yapabilmek için birleştirmek mümkün mü?

Veri metro ajans, Ajax ve html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

Dosyaları DV Ajax ve html

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Nasıl Ajax kullanarak bir forma veri ve dosyaları gönderebilirim böylece yukarıda birleştirebilir miyim?

Amacım Ajax ile bir post bu formu göndermek edebilmek için, mümkün mü?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

CEVAP

5 HAZİRAN 2012, Salı

Yaşadığım sorun, yanlış bir WordPress kullanmak tanımlayıcı kullanıyordu.

Sanaolabilir yükleme verileri ve dosyalarıbir form ileajax kullanarak.

PHP HTML

<?
    print_r($_POST);
    print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Ajax jQuery

$("form#data").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

Kısa Versiyon

$("form#data").submit(function() {

    var formData = new FormData($(this)[0]);

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });

    return false;
});

Bunu Paylaş: