JS中FormData類(lèi)實(shí)現(xiàn)文件上傳
本文實(shí)例為大家分享了JS中FormData類(lèi)實(shí)現(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下
上篇文章講到了FormReader類(lèi)實(shí)現(xiàn)文件上傳，但是那是HTML5的新特性，在不支持H5的瀏覽器上則無(wú)法使用。這次介紹一個(gè)JS的普通類(lèi)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 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ù)器端返回上傳路徑，供客戶(hù)端預(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 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)行顯示，否則用戶(hù)會(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; // 解析客戶(hù)端傳遞過(guò)來(lái)的FormData對(duì)象 form.parse(req, (err, fileds, files) => { // 將文件的地址扒出來(lái)以json對(duì)象的形式返回給客戶(hù)端 res.send({ path: files.attrName.path.split(’public’)[1] }); })})
更多精彩內(nèi)容請(qǐng)參考專(zhuān)題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）2. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作3. ASP新手必備的基礎(chǔ)知識(shí)4. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象5. asp文件用什么軟件編輯6. JAVA 實(shí)現(xiàn)延遲隊(duì)列的方法7. JS中6個(gè)對(duì)象數(shù)組去重的方法8. vue+element開(kāi)發(fā)一個(gè)谷歌插件的全過(guò)程9. 利用CSS制作3D動(dòng)畫(huà)10. vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)
網(wǎng)公網(wǎng)安備