JS中FormData類實現文件上傳
本文實例為大家分享了JS中FormData類實現文件上傳的具體代碼，供大家參考，具體內容如下
上篇文章講到了FormReader類實現文件上傳，但是那是HTML5的新特性，在不支持H5的瀏覽器上則無法使用。這次介紹一個JS的普通類FormData，在不支持H5瀏覽器環境下也可以文件上傳和預覽，并且還能監控上傳進度。
案例一：xhr.upload.onprogress監控文件的上傳進度，并且動態顯示
<!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監聽上傳進度 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>
案例二：服務器端返回上傳路徑，供客戶端預覽上傳的圖片效果
成功預覽我家耶啵的帥照
<!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服務器端的部分代碼：
app.post(’/upload’, (req, res) => { // 創建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] }); })})
更多精彩內容請參考專題《ajax上傳技術匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. 解決docker與vmware的沖突問題2. Django中的AutoField字段使用3. Python基于jieba, wordcloud庫生成中文詞云4. IntelliJ Idea 2020.1 正式發布,官方支持中文（必看）5. IntelliJ IDEA設置自動提示功能快捷鍵的方法6. asp.net core應用docke部署到centos7的全過程7. Java 3D的動畫展示(Part1-使用JMF)8. Django ORM實現按天獲取數據去重求和例子9. 刪除docker里建立容器的操作方法10. java使用FFmpeg合成視頻和音頻并獲取視頻中的音頻等操作(實例代碼詳解)
網公網安備