當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览
生活随笔
收集整理的這篇文章主要介紹了
javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 準(zhǔn)備工作
因?yàn)橐l(fā)送Ajax請(qǐng)求,而Ajax技術(shù)的運(yùn)行需要網(wǎng)站環(huán)境,因此其中一個(gè)解決方案是,將頁(yè)面作為網(wǎng)站的靜態(tài)資源暴露出來(lái),然后通過(guò)瀏覽器進(jìn)行訪問(wèn).
1.1 靜態(tài)資源
- 使用express將public下面的資源暴露出來(lái)
- 在根目錄下面新建一個(gè)public文件夾和一個(gè)app.js文件
- 在public下新建一個(gè)01.html
- 命令行輸入nodemon app.js(注意目錄), 打開(kāi)瀏覽器訪問(wèn)localhost:3000/01.html
2. 文件上傳的進(jìn)度條展示
- 下面的樣式使用到了 bootstrap. 不導(dǎo)入也沒(méi)關(guān)系
- 在文件上傳的過(guò)程中,可以將上傳的進(jìn)度實(shí)時(shí)展示出來(lái),這樣用戶的體驗(yàn)感會(huì)提升
- 核心代碼如下:
- 思路如下:
1.在input框下面有一個(gè)顯示進(jìn)度條的元素
2.點(diǎn)擊文件上傳后,會(huì)觸發(fā)file.onchange事件
3.在文件傳到服務(wù)器(FormData)的過(guò)程中會(huì)持續(xù)觸發(fā)xhr.upload.onprogress事件.
4.在onprogress事件中,會(huì)有一個(gè)ev對(duì)象,它保留著,文件上傳的信息
5.利用文件上傳的信息,算出上傳的進(jìn)度,顯示在網(wǎng)頁(yè)中
2.1 [栗子] - 上傳的表單控件
<div class="container"><div class="form-group"><label>請(qǐng)選擇文件</label><input type="file" id="file" /><br /><div class="progress"><div class="progress-bar" style="width: 0%;" id="bar">0%</div></div></div> </div>2.2 [栗子] - 上傳的代碼(前端)
<script>var file = document.getElementById('file');var bar = document.getElementById('bar');file.onchange = function () {// 文件上傳使用到 FormData構(gòu)造函數(shù)var formData = new FormData();// 'attrName'方便后面使用.formData.append('attrName', this.files[0]);// 上傳的信息準(zhǔn)備好了,接下來(lái)準(zhǔn)備Ajax請(qǐng)求var xhr = new XMLHttpRequest();xhr.open('post','http://localhost:3000/uploads');// 文件上傳的過(guò)程中,會(huì)持續(xù)觸發(fā)onprogress事件xhr.upload.onprogress = function(ev){var result = (ev.loaded / ev.total) * 100 + '%';// 算出上傳的百分比,并將值放在bar中bar.style.width = result;bar.innerHTML = result;}xhr.send(formData);xhr.onload = function () {if(xhr.status == 200 ){console.log(xhr.responseText)}}} </script>2.3 [栗子] - 上傳的代碼(服務(wù)端)
// 服務(wù)端使用formidable解析參數(shù) const formidable = require('formidable'); const path = require('path') app.post('/uploads', (req, res)=>{// 創(chuàng)建接收的實(shí)例const form = new formidable.IncomingForm();// 設(shè)置文件的存儲(chǔ)位置form.uploadDir = path.join(__dirname, 'public', 'uploads');// 保留后綴名form.keepExtensions = true;// 解析客戶端的數(shù)據(jù)form.parse(req, (err, fields ,files) =>{res.send({ path: files.attrName.path.split('public')[1] })}) })3. 文件上傳圖片即使預(yù)覽
- 以前寫(xiě)過(guò)一篇放在前端內(nèi)存中的
- 這一篇是:
- 將圖片通過(guò)FormData傳遞到服務(wù)端
- 然后服務(wù)端將圖片保存在靜態(tài)資源中,并將資源的地址返回給客戶端
- 然后客戶端訪問(wèn)這個(gè)靜態(tài)資源進(jìn)行顯示
3.1 [栗子] - 前端dom元素如下
<div class="container"><div class="form-group"><label>請(qǐng)選擇</label><input type="file" id="file" /><!-- 用來(lái)顯示上傳的圖片 --><div class="padding" id="box"></div></div> </div>3.2 [栗子] - 前端上傳文件的代碼
<script>var file = document.getElementById('file');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', 'http://localhost:3000/uploads')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>3.3[栗子] - 后端代碼
// 服務(wù)端使用formidable解析參數(shù) const formidable = require('formidable'); const path = require('path') app.post('/uploads', (req, res)=>{// 創(chuàng)建接收的實(shí)例const form = new formidable.IncomingForm();// 設(shè)置文件的存儲(chǔ)位置form.uploadDir = path.join(__dirname, 'public', 'uploads');// 保留后綴名form.keepExtensions = true;// 解析客戶端的數(shù)據(jù)form.parse(req, (err, fields ,files) =>{res.send({ path: files.attrName.path.split('public')[1] })}) })4. 參考
源代碼
總結(jié)
以上是生活随笔為你收集整理的javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 换热站实际应用程序:西门子200smar
- 下一篇： html绘制波形图,JS实现波形图