首頁 > 文章 > 後端開發 > Ajax之檔案非同步上傳的多種方法

Ajax之檔案非同步上傳的多種方法

小云云原創: 2017-11-20 14:09:541826瀏覽

Ajax的核心是JavaScript物件XmlHttpRequest。該物件在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest可讓您使用JavaScript向伺服器提出請求並處理回應，而不會阻塞使用者。 Ajax對伺服器沒什麼要求，可以為Java EE應用程序，.NET應用程式和其他類型的應用程式服務。可以透過Ajax，可以編寫javascript程式碼來改進HTML，創造出豐富的互動性使用者體驗。

1. 認識FormData物件

FormData是Html5新加進來的一個類別,可以模擬表單資料

建構子

解釋

FormData (optional HTMLFormElement form) (可選) 一個HTML表單元素,可以包含任何形式的表單控制項,包含檔案輸入框.

#方法

void append(DOMString name, DOMString 值)

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(&#39;userName&#39;, userName);
    fm.append(&#39;img&#39;, img);    var request = new XMLHttpRequest();
    request.open(&#39;POST&#39;, &#39;submitform.php&#39;);
    request.send(fm);
}

3.使用Ajax實作

$(&#39;#btn&#39;).click(function () {    var userName = document.myForm.userName.value;    var img = document.myForm.img.files[0];    var fm = new FormData();
    fm.append(&#39;userName&#39;, userName);
    fm.append(&#39;img&#39;, img);
    $.ajax(
        {
            url: &#39;submitform.php&#39;,
            type: &#39;POST&#39;,
            data: fm,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            //禁止的原因是,FormData已经帮我们做了处理
            success: function (result) {                //测试是否成功
                //但需要你后端有返回值
                alert(result);
            }
        }
    );
});

4. ajaxfileupload.js外掛實作Ajax檔上傳

function upload(){
$.ajaxFileUpload({
        url: &#39;a.php&#39;, //用于文件上传的服务器端请求地址
        secureuri: false, //一般设置为false
        fileElementId: &#39;file&#39;, //文件上传空间的id属性  
        dataType: &#39;HTML&#39;, //返回值类型 一般设置为json
        success: function (data, status)  //服务器成功响应处理函数        {                
            $("#img1").attr("src", data);
            addI(data);
        },
        error: function (data, status, e)//服务器响应失败处理函数        {
            alert(e);
        }
    }   
);
}

對於PHP就可以使用Files全域數組拿到檔案屬性,POST全域數組拿到userName的值

以上就是Ajax簡單實作檔案非同步上傳的多種方法,希望對大家有幫助。

Ajax之檔案非同步上傳的多種方法

相關文章