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);
        }
    }   
);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章