FormData 異步上傳文件

idisfkj 發布于2019-08-20 14:12 / 1588人閱讀

摘要：一創建放入待上傳文件準備對象將文件放入對象中二通過發送數據到服務器，實現文件上傳創建對象監聽文件上傳進度文件長度是否可計算已下載的字節數文件總字節數監聽文件傳輸開始終止上傳監聽成功完成事件監聽錯誤事件監聽被中止事件監聽傳輸結束事件不管成功或

DOM

一、創建FormData放入待上傳文件

//準備FormData對象
var formData = new FormData(),
    uploadFile = document.getElementById("file");
    
//將文件放入FormData對象中    
formData.append("file", uploadFile.files[0]);

二、通過xhr發送FormData數據到服務器，實現文件上傳

//創建xhr對象
var xhr = new XMLHttpRequest();

//監聽文件上傳進度
xhr.upload.onprogress = function(evt){
    //lengthComputabel: 文件長度是否可計算
    if(evt.lengthComputable){
        //evt.loaded: 已下載的字節數
        //evt.total: 文件總字節數
        var percent = Math.round(evt.loaded*100/evt.total);
        console.log(percent);
    }
}

//監聽文件傳輸開始    
xhr.onloadstart = function(evt）{
        xhr.abort() //終止上傳
}

//監聽ajax成功完成事件
xhr.onload = function(evt){
    ...
}

//監聽ajax錯誤事件    
xhr.onerror = function(evt){
    ...
}

//監聽ajax被中止事件
xhr.onabort = function(evt){
    ...
}

//監聽傳輸結束事件: 不管成功或者失敗都會觸發
xhr.onloaded = function(evt){
    ...
}   
   
//*發起ajax請求數據
xhr.open("POST", "/url", true);
xhr.send(formData);

來源 http://www.jikexueyuan.com/co...

云服務器 GPU云服務器 formdata上傳文件異步文件上傳 Java異步上傳文件文件異步上傳文件到云服務器

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

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

H5拖放+FormData接口+NodeJS，完整異步文件上傳（一）

摘要：前段時間面試過程中，頻繁遇到異步文件上傳的相關問題。所以，這會是一個拖放接口實現文件異步上傳的完整。監聽放置元素的事件，通過對象可以獲得拖拽事件的狀態及數據。后端文件接收保存后端使用實現文件上傳。 ??前段時間面試過程中，頻繁遇到H5異步文件上傳的相關問題。還遇到過一個通過H5拖放功能實現文件異步上傳的問題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試...

NervosNetwork 2019-08-22 15:57 評論0 收藏0
antd 和 element上傳文件詳解與FormData詳解

摘要：當用戶完成選擇文件動作時，提交子頁面中的。從此我們上傳文件就歡欣鼓舞的來找了。因為的核心是對象，異步的實現是通過一個對象，一般簡稱該對象對。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。背景平時工作中經常會遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。我們分別來看一下element 和 antd 手動上傳怎么處理：...

Fundebug 2019-08-23 10:29 評論0 收藏0
web端文件上傳功能的思考

摘要：概述文件上傳是一個很常見的需求，實現文件上傳的技術也很多。幫助文檔模擬無刷新的文件上傳功能頁面無刷新上傳文件模擬，超簡單為什么上傳文件的表單里要加個屬性接口對象的介紹使用對象涉及文章侵權，請郵件告知。概述文件上傳是一個很常見的需求，實現文件上傳的技術也很多。下面就談談一些常見的上傳技術以及它們的優劣。傳統表單上傳傳統表單文件上傳估計是運用最廣泛和最簡單的技術了，說它簡單是...

Jaden 2019-08-21 12:35 評論0 收藏0
node.js實現formdata上傳文件

摘要：對象包含表單的文本域信息，或對象包含對象表單上傳的文件信息。是文件的信息前端傳遞的文件類型在中獲取將具有文本域數據，如果存在的話。 node.js實現formdata上傳文件 1.關于formdata XMLHttpRequest Level 2 添加了一個新的接口——FormData。利用 FormData 對象，我們可以通過 JavaScript 用一些鍵值對來模擬一系列表單控件，...

Aceyclee 2019-08-22 13:56 評論0 收藏0