JS中FormData類實(shí)現(xiàn)文件上傳
本文實(shí)例為大家分享了JS中FormData類實(shí)現(xiàn)文件上傳的具體代碼,供大家參考,具體內(nèi)容如下
上篇文章講到了FormReader類實(shí)現(xiàn)文件上傳,但是那是HTML5的新特性,在不支持H5的瀏覽器上則無(wú)法使用。這次介紹一個(gè)JS的普通類FormData,在不支持H5瀏覽器環(huán)境下也可以文件上傳和預(yù)覽,并且還能監(jiān)控上傳進(jìn)度。
案例一:xhr.upload.onprogress監(jiān)控文件的上傳進(jìn)度,并且動(dòng)態(tài)顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .progress { width: 100px; height: 10px; background-color: #eee; } .progress-bar { width: 0; height: 10px; background-color: blue; } </style> </head> <body> <form action="" id="form"> <input type="file" name="file" id="file"> </form> <div class="progress"> <div class="progress-bar" id="bar"></div> </div> <script> var file = document.getElementById("file"); var bar = document.getElementById("bar"); file.onchange = function () { var formData = new FormData(); // 上傳的文件 formData.append('attrName', this.files[0]); var xhr = new XMLHttpRequest(); xhr.open("post", "/upload"); // xhr.upload.onprogress監(jiān)聽(tīng)上傳進(jìn)度 xhr.upload.onprogress = function (ev) { // ev.loaded表示上傳了多少,ev.total表示文件的總大小 var result = (ev.loaded / ev.total * 100).toFixed(2) + '%'; // result為進(jìn)度百分比 bar.style.width = result; bar.innerHTML = result; } xhr.send(formData); xhr.onload = function () { if(xhr.status == 200) { console.log(xhr.responseText); } } } </script> </body> </html>
案例二:服務(wù)器端返回上傳路徑,供客戶端預(yù)覽上傳的圖片效果
成功預(yù)覽我家耶啵的帥照
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .progress { display: inline-block; width: 600px; height: 20px; border-radius: 5px; background-color: #eee; } .progress-bar { width: 0; height: 20px; background-color: orange; border-radius: 5px; font-size: 16px; text-align: center; color: #fff; } </style> </head> <body> <form action="" id="form"> <input type="file" name="file" id="file"> <div class="progress"> <div class="progress-bar" id="bar"></div> </div> </form> <div id="box"></div> <script> var file = document.getElementById("file"); var bar = document.getElementById("bar"); var box = document.getElementById("box"); file.onchange = function () { var formData = new FormData(); // 上傳的文件 formData.append('attrName', this.files[0]); var xhr = new XMLHttpRequest(); xhr.open("post", "/upload"); xhr.upload.onprogress = function (ev) { // ev.loaded表示上傳了多少,ev.total表示文件的總大小 var result = (ev.loaded / ev.total * 100).toFixed(2) + '%'; // result為進(jìn)度百分比 bar.style.width = result; bar.innerHTML = result; } xhr.send(formData); xhr.onload = function () { if(xhr.status == 200) { var result = JSON.parse(xhr.responseText); var img = document.createElement('img'); img.src = result.path; // 圖片加載完成在進(jìn)行顯示,否則用戶會(huì)看到圖片的加載過(guò)程,效果不好 img.onload = function () { box.appendChild(img); } } } } </script> </body> </html>
nodejs服務(wù)器端的部分代碼:
app.post('/upload', (req, res) => { // 創(chuàng)建formidable表單解析對(duì)象 const form = new formidable.IncomingForm(); // 上傳文件的路徑 form.uploadDir = path.join(__dirname, 'public', 'uploads'); // 上傳文件的后綴名保留 form.keepExtensions = true; // 解析客戶端傳遞過(guò)來(lái)的FormData對(duì)象 form.parse(req, (err, fileds, files) => { // 將文件的地址扒出來(lái)以json對(duì)象的形式返回給客戶端 res.send({ path: files.attrName.path.split('public')[1] }); }) })
更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》,《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 如何基于js管理大文件上傳及斷點(diǎn)續(xù)傳詳析
- JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解
- node.js使用express-fileupload中間件實(shí)現(xiàn)文件上傳
- jquery實(shí)現(xiàn)異步文件上傳ajaxfileupload.js
- 基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例
- JS可斷點(diǎn)續(xù)傳文件上傳實(shí)現(xiàn)代碼解析
- JS中FileReader類實(shí)現(xiàn)文件上傳及時(shí)預(yù)覽功能
- js 實(shí)現(xiàn)文件上傳樣式詳情
相關(guān)文章
JSP跨iframe如何傳遞參數(shù)實(shí)現(xiàn)代碼
表單與操作頁(yè)面分離,按鈕按下,click 或者onclick事件觸發(fā),傳遞一個(gè)唯一性的參數(shù)至子頁(yè)面JSP,感興趣的朋友可以了解下2013-09-09javascript實(shí)現(xiàn)實(shí)時(shí)輸出當(dāng)前的時(shí)間
在網(wǎng)頁(yè)中實(shí)時(shí)的顯示時(shí)間,不但可以給網(wǎng)頁(yè)添色,還可以方便瀏覽者掌握當(dāng)前時(shí)間,為了提高網(wǎng)站的開(kāi)發(fā)速度,可以把主代碼封裝在一個(gè)單獨(dú)的函數(shù)里面,在需要的時(shí)候直接調(diào)用而我為了演示,直接寫在了主頁(yè)面,方便大家觀看2015-04-04javascript實(shí)現(xiàn)根據(jù)身份證號(hào)讀取相關(guān)信息
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)身份證號(hào)讀取相關(guān)信息,需要的朋友可以參考下2014-12-12JS插件plupload.js實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了PHP結(jié)合plupload.js JS插件實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條加刪除實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11js中判斷Object、Array、Function等引用類型對(duì)象是否相等
項(xiàng)目中有時(shí)會(huì)需要對(duì)引用類型進(jìn)行比較,如常見(jiàn)的object和array,我們知道,引用類型無(wú)法直接使用 == 或=== 取得期待結(jié)果,因此需要一個(gè)迭代的compare函數(shù)轉(zhuǎn)化成原始類型進(jìn)行比較2012-08-08