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的使用] 文件上传进度条展示文件上传图片即使预览相关推荐

html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打 ...
大文件上传进度条显示（仿CSDN资源上传效果） .
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
大文件上传进度条显示（仿CSDN资源上传效果）
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
js实现文件上传进度条功能
开发中可能会涉及到需要展示文件上传进度条显示,方便用户知道文件的上传状态.其实进度条展示只需要拿到文件已上传的大小,和被上传文件的总大小即可.废话不多说直接上代码!! class fileUpload ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
html ajax 上传进度条,ajax文件上传带进度条
HTML5 file 在选择上传文件的时候,根据需要可限制指定的文件类型(默认任意类型 ).在 input type="file" 加上 accept="指定要上传的文件 ...

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

1. 准备工作

1.1 静态资源

2. 文件上传的进度条展示

2.1 [栗子] - 上传的表单控件

2.2 [栗子] - 上传的代码(前端)

2.3 [栗子] - 上传的代码(服务端)

3. 文件上传图片即使预览

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

3.2 [栗子] - 前端上传文件的代码

3.3[栗子] - 后端代码

4. 参考

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

最新文章

热门文章

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

1. 准备工作

1.1 静态资源

2. 文件上传的进度条展示

2.1 [栗子] - 上传的表单控件

2.2 [栗子] - 上传的代码(前端)

2.3 [栗子] - 上传的代码(服务端)

3. 文件上传图片即使预览

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

3.2 [栗子] - 前端上传文件的代码

3.3[栗子] - 后端代码

4. 参考

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

最新文章

热门文章

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

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