JS中FormData類實現(xiàn)文件上傳
本文實例為大家分享了JS中FormData類實現(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下
上篇文章講到了FormReader類實現(xiàn)文件上傳，但是那是HTML5的新特性，在不支持H5的瀏覽器上則無法使用。這次介紹一個JS的普通類FormData，在不支持H5瀏覽器環(huán)境下也可以文件上傳和預(yù)覽，并且還能監(jiān)控上傳進度。
案例一：xhr.upload.onprogress監(jiān)控文件的上傳進度，并且動態(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)聽上傳進度 xhr.upload.onprogress = function (ev) { // ev.loaded表示上傳了多少，ev.total表示文件的總大小 var result = (ev.loaded / ev.total * 100).toFixed(2) + ’%’; // result為進度百分比 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 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為進度百分比 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; // 圖片加載完成在進行顯示，否則用戶會看到圖片的加載過程，效果不好 img.onload = function () { box.appendChild(img); } } } } </script></body></html>
nodejs服務(wù)器端的部分代碼：
app.post(’/upload’, (req, res) => { // 創(chuàng)建formidable表單解析對象 const form = new formidable.IncomingForm(); // 上傳文件的路徑 form.uploadDir = path.join(__dirname, ’public’, ’uploads’); // 上傳文件的后綴名保留 form.keepExtensions = true; // 解析客戶端傳遞過來的FormData對象 form.parse(req, (err, fileds, files) => { // 將文件的地址扒出來以json對象的形式返回給客戶端 res.send({ path: files.attrName.path.split(’public’)[1] }); })})
更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. idea給項目打war包的方法步驟2. Intellij IDEA 2020.3 配置教程詳解3. Python importlib模塊重載使用方法詳解4. ASP基礎(chǔ)入門第八篇（ASP內(nèi)建對象Application和Session）5. IntelliJ IDEA刪除類的方法步驟6. 兩行Javascript代碼生成UUID的方法7. IntelliJ IDEA設(shè)置編碼格式的方法8. XML入門精解之結(jié)構(gòu)與語法9. 使用 kind 和 Docker 啟動本地的 Kubernetes環(huán)境10. mint-ui如何自定義messageBox樣式
網(wǎng)公網(wǎng)安備