jquery ajax 上傳文件處理

Snailclimb 發布于2019-08-19 18:39 / 3261人閱讀

摘要：之前都是用原生的寫的請求方式其實的也可以支持到的，關鍵是設置和。方式告訴不要去處理發送的數據告訴不要去設置請求頭正在進行，請稍候成功失敗

FormData對象

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.

所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
之前都是用原生js的XMLHttpRequest寫的請求

XMLHttpRequest方式

xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // Handle response.
        alert(xhr.responseText); // handle response.
    }
};
fd.append("myFile", file);
// Initiate a multipart/form-data upload
xhr.send(fd);

其實jquery的ajax也可以支持到的，關鍵是設置：processData 和 contentType 。

ajax方式

var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({  
        url : Url,  
        type : "POST",  
        data : formData,  
        // 告訴jQuery不要去處理發送的數據
        processData : false, 
        // 告訴jQuery不要去設置Content-Type請求頭
        contentType : false,
        beforeSend:function(){
               console.log("正在進行，請稍候");
                },
        success : function(responseStr) { 
            if(responseStr.status===0){
                console.log("成功"+responseStr);
            }else{
                console.log("失敗");
            }
        },  
        error : function(responseStr) { 
            console.log("error");
        }  
    });

GPU云服務器云服務器 ajax上傳文件 ajax文件上傳 ajax實現文件上傳 Ajax文件上傳庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79823.html

HTML5+Ajax上傳文件

摘要：比起普通的，使用的最大優點就是我們可以異步上傳一個二進制文件。方法二一次性上傳多個文件如果后臺接口要求單個文件，就循環獲取文件信息提交，使用同步上傳。歡迎交換友鏈 Lakers Blog--進擊的程序媛Github：https://github.com/younglaker微博: 江小湖Laker showImg(https://segmentfault.com/img/bVtcT...

qieangel2013 2019-08-19 17:45 評論0 收藏0
ajax上傳文件的請求

摘要：是發送的必須是類型注意把設為，讓不要對做處理，如果不設置為，會把轉換為字符串。查看文件上傳的請求頭里，參數為請求參數之間的界限標識。也就是說防止覆蓋掉的。 1、data是FormData 發送的data必須是FormData類型 2、注意processData 把processData設為false，讓jquery不要對formData做處理，如果processData不設置為fals...

Cobub 2019-08-21 18:25 評論0 收藏0
文件上傳進度提示

摘要：需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。而要在上傳過程實時顯示上傳進度，則需要已上傳的大小和文件總大小。前提請求是異步的。因為要實時獲取到上傳的進度...

MageekChiu 2019-08-20 15:17 評論0 收藏0
在Laravel項目中實現Ajax上傳用戶頭像

摘要：在編寫程序的過程中，經常會遇到一個經典的文件上傳場景上傳頭像圖片。基于對最好的用戶體驗的追求，寫一下之前在項目中實現在項目中的上傳頭像。在編寫web程序的過程中，經常會遇到一個經典的文件上傳場景：上傳頭像（圖片）。基于對最好的用戶體驗的追求，寫一下之前在項目中實現在Laravel項目中的Ajax上傳頭像。 1.配置路由在Laravel的routes.php中設置路由： Rou...

shiina 2019-06-27 11:20 評論0 收藏0