日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览

發布時間：2023/12/10 javascript 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 準備工作

因為要發送Ajax請求,而Ajax技術的運行需要網站環境,因此其中一個解決方案是,將頁面作為網站的靜態資源暴露出來,然后通過瀏覽器進行訪問.

1.1 靜態資源

  • 使用express將public下面的資源暴露出來
  • 在根目錄下面新建一個public文件夾和一個app.js文件
// app.js const express = require('express'); const path = require('path') const app = express();app.use(express.static(path.join(__dirname, 'public')))app.listen(3000, () =>{console.log('localhost:3000'); })
  • 在public下新建一個01.html
<!-- 01.html --> <body><h2>通過靜態資源訪問 01.html</h2> </body>
  • 命令行輸入nodemon app.js(注意目錄), 打開瀏覽器訪問localhost:3000/01.html

2. 文件上傳的進度條展示

  • 下面的樣式使用到了 bootstrap. 不導入也沒關系
  • 在文件上傳的過程中,可以將上傳的進度實時展示出來,這樣用戶的體驗感會提升
  • 核心代碼如下:
file.onchange = function () {xhr.upload.onprogress = function (ev) {console.log( (ev.loaded / ev.total) * 100 + '%' );} }
  • 思路如下:

1.在input框下面有一個顯示進度條的元素

2.點擊文件上傳后,會觸發file.onchange事件

3.在文件傳到服務器(FormData)的過程中會持續觸發xhr.upload.onprogress事件.

4.在onprogress事件中,會有一個ev對象,它保留著,文件上傳的信息

5.利用文件上傳的信息,算出上傳的進度,顯示在網頁中

2.1 [栗子] - 上傳的表單控件

<div class="container"><div class="form-group"><label>請選擇文件</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構造函數var formData = new FormData();// 'attrName'方便后面使用.formData.append('attrName', this.files[0]);// 上傳的信息準備好了,接下來準備Ajax請求var xhr = new XMLHttpRequest();xhr.open('post','http://localhost:3000/uploads');// 文件上傳的過程中,會持續觸發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 [栗子] - 上傳的代碼(服務端)

// 服務端使用formidable解析參數 const formidable = require('formidable'); const path = require('path') app.post('/uploads', (req, res)=>{// 創建接收的實例const form = new formidable.IncomingForm();// 設置文件的存儲位置form.uploadDir = path.join(__dirname, 'public', 'uploads');// 保留后綴名form.keepExtensions = true;// 解析客戶端的數據form.parse(req, (err, fields ,files) =>{res.send({ path: files.attrName.path.split('public')[1] })}) })

3. 文件上傳圖片即使預覽

  • 以前寫過一篇放在前端內存中的
  • 這一篇是:
    • 將圖片通過FormData傳遞到服務端
    • 然后服務端將圖片保存在靜態資源中,并將資源的地址返回給客戶端
    • 然后客戶端訪問這個靜態資源進行顯示

3.1 [栗子] - 前端dom元素如下

<div class="container"><div class="form-group"><label>請選擇</label><input type="file" id="file" /><!-- 用來顯示上傳的圖片 --><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[栗子] - 后端代碼

// 服務端使用formidable解析參數 const formidable = require('formidable'); const path = require('path') app.post('/uploads', (req, res)=>{// 創建接收的實例const form = new formidable.IncomingForm();// 設置文件的存儲位置form.uploadDir = path.join(__dirname, 'public', 'uploads');// 保留后綴名form.keepExtensions = true;// 解析客戶端的數據form.parse(req, (err, fields ,files) =>{res.send({ path: files.attrName.path.split('public')[1] })}) })

4. 參考

源代碼

總結

以上是生活随笔為你收集整理的javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。