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

1. 認識FormData對象

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

構造函數	解釋
FormData (optional HTMLFormElement form)	(可選) 一個HTML表單元素,能夠包含任何形式的表單控件,包括文件輸入框.

方法

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

---

文章一： 我的搭建FQ服務器

原文地址：https://www.jianshu.com/p/d90d2e6bb0d5