Ajax簡單實現文件異步上傳的多種方法

1. 認識FormData對象

FormData是Html5新加進來的一個類,可以模擬表單數據

方法

void append(DOMString name, DOMString value)

• name 表單元素名稱
• value 表單元素要傳遞的值

<form name="myForm"  enctype="multipart/form-data">
    <input type="text" name="userName">
    <input type="file" name="img">
    <input type="button" id="btn" value="submit">
</form>

2. 使用javascript簡單實現

function upload() {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];
    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);

    var request = new XMLHttpRequest();
    request.open('POST', 'submitform.php');
    request.send(fm);
}

3. 使用Ajax實現

$('#btn').click(function () {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];

    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);
    $.ajax(
        {
            url: 'submitform.php',
            type: 'POST',
            data: fm,
            contentType: false, //禁止設置請求類型
            processData: false, //禁止jquery對DAta數據的處理,默認會處理
            //禁止的原因是,FormData已經幫我們做了處理
            success: function (result) {
                //測試是否成功
                //但需要你后端有返回值
                alert(result);
            }
        }
    );
});

4. ajaxfileupload.js插件實現Ajax文件上傳

function upload(){
$.ajaxFileUpload({
        url: 'a.php', //用于文件上傳的服務器端請求地址
        secureuri: false, //一般設置為false
        fileElementId: 'file', //文件上傳空間的id屬性  
        dataType: 'HTML', //返回值類型 一般設置為json
        success: function (data, status)  //服務器成功響應處理函數
        {                
            $("#img1").attr("src", data);
            addI(data);
        },
        error: function (data, status, e)//服務器響應失敗處理函數
        {
            alert(e);
        }
    }   
);
}

• 對于PHP就可以使用Files全局數組拿到文件屬性,POST全局數組拿到userName的值

來自：http://www.jianshu.com/p/d90d2e6bb0d5