透過Ajax上傳檔案

發出Ajax時將fileUpload的資料新增至FormData，模擬Form實際送資料的過程

FormData只支援IE10以上的版本

• FormData Support

HTML

<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>

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

精簡版

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

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

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

    return false;
});

參考連結

• Uploading both data and files in one form using Ajax?