jquery进度条设置,js进度条开始和暂停 收藏 0

php手把手教你做网站（二十四）jquery ajax上传大的附件

上传大的附件分为两种情况，

1. 可以改变服务器配置；
2. 不能改变配置；

第2种使用分片上传

优势：可以突破服务器上传大小的限制，可以web存储上传到哪一块了，在浏览器关闭或者刷新的情况下可以断点续传；

劣势：上传速度慢，在我本地电脑测试，200M的文件，改变配置按照正常方式上传大约需要12到15秒，但是使用第2种分片上传，大约需要40多秒，也就是所需时间是正常上传的3倍，我测试了for循环同时上传几个碎片，电脑直接很卡，点击别的浏览器或者文件夹之类的全部是没有响应，所以放弃了使用循环同时上传多个；

如果上传大的文件实现进度条是很有必要的，否则用户看不到进度会等得不耐烦了。

小的文件只需要2秒左右，是否有进度条没有关系。

第一种，在可以改变服务器配置的前提下

图1 带进度条文件上传

1、配置php.ini

1. post_max_size post数据默认8M
2. upload_tmp_dir 文件上传临时文件（upload_tmp_dir=\”E:\\temp8.0.11\”）
3. upload_max_filesize 上传的大小默认2M
4. max_execution_time 程序超时时间默认30秒

如果上传的文件比较大，以上4点都需要修改，特别是第2点，尽可能配置，否则上传最后会比较慢。

2、iis上传大小限制，可以在web.config直接修改，加入以下代码

<requestLimits maxAllowedContentLength=\”1073741824\” /> 这里是限制的大小，默认大小忘记了，我这里设置的是可以上传1G进行的测试。

3、nginx上传大小限制

1. client_max_body_size 2000m; #upload size 随便写的2000M方便上传1G大小文件测试
2. client_header_timeout 300;
3. fastcgi_connect_timeout 300;
4. fastcgi_send_timeout 300;
5. fastcgi_read_timeout 300;
6. fastcgi_request_buffering off;

我开始想把这些加到location / {}里边，提示错误client_header_timeout不允许放到里边，所以全部加到外边了，也就是server {}里边；

注意下第6点，如果不配置，nginx上传文件会存到缓存，然后再一点一点传到upload_tmp_dir的目录下，导致上传所需时间是iis的2倍。

4、html代码

5、css代码 用来设置进度条

6、js代码(jquery使用监听progress实现进度条功能)

7、后端php处理程序

第二种，不能改变服务器的配置使用分片上传

图2 进度条显示多少片

html，css不变，只是改变js，下面是用到的js代码

代码1：点击事件

代码2：uploadtp方法

php后端处理程序

说明：

1. 返回代码0000上传完成，0001未完成继续上传，其他错误提示；
2. 分片上传不能使用move_uploaded_file，而是使用file_put_contents追加
3. file_put_contents追加用法file_put_contents(\”物理路径+文件名\”,\”追加的信息\”,FILE_APPEND);

nginx上传文件很慢

处理办法：关闭 fastcgi_request_buffering，如果不关闭，上传所需时间至少是iis的2倍；

具体操作：编辑nginx.conf，

server {

fastcgi_request_buffering off;

}

springboot：实现文件上传下载实时进度条功能【附带源码】

记得刚入行的时候，做了一个文件上传的功能，因为上传时间较久，为了用户友好性，想要添加一个实时进度条，显示进度。奈何当时技术有限，查了许久也没用找到解决方案，最后不了了之。

近来偶然想到这个问题，于是决定整理一下实现方式，也为和我曾经一样碰壁的同学，提供一些思路。

1、首先我们这里实现的是一个实时的进度条，并不是一个纯前端的进度条，它需要根据后端的处理进度来实时反馈进度条长度，那么必然要与后端交互。

当然这里容易陷入一个误区，觉得与后端交互的，那么这个功能的重点一定在后端，但实际上这个功能的重点在前端。

不难想到，我们要知道实时进度，那么一定需要不断的请求后端，得到响应反馈，前后端请求比较常用的是ajax，但除它之外，我们还有更基础的xhr（XMLHttpRequest）。作为后端同学可能对xhr有些陌生，实际上ajax就是基于xhr实现的。

2、xhr可以让我们在不重新加载页面的情况下更新网页，在页面已经加载后从后端请求并接受数据，这样就可以无感的让我们后端文件的上传进度了。

3、为了监听文件上传下载进度，我们主要使用到xhr的三个进度事件：

• progress： 在接收响应期间持续不断地触发
• load: 在接收到完整的响应数据时触发
• error: 在请求发生错误时触发

当然除上述三个事件之外，还有其他的进度事件，这不是本文的重点，大家可自行拓展学习XHR对象的进度事件

XMLHttpRequest简介

4、基于上述三个进度事件，我们可以通过process事件持续不断地发送请求获取文件上传下载的进度，load事件用于文件上传下载完成后的处理，比如提示成功。error用于请求发送错误时的处理。

5、有了上述的思路之后，我们来进行实际演示。

1、创建springboot项目，引入spring web、lombok、文件上传commons-fileupload依赖

2、创建MultipartResolver的bean，用来将普通的请求封装成拥有文件上传功能的请求

3、创建一个文件上传接口：这里我单纯做个演示，就直接在controller层中书写了，实际生产要将上传方法提取为工具类，在service中进行具体业务处理。

如下代码为将文件上传后，保存到资源文件夹下

4、后端接口完成后，进入我们的重点，我们来实现前端进度条

5、首先引入jQuery，我这里使用了3.6.1版本

6、实现一个上传的页面，这里利用了html5的progress标签，该标签用于实现进度条，支持两个属性：value和max，分别为当前进度值和最大进度值

7、书写进度监听方法，即progress方法

8、书写load,error方法

9、实现上传方法upload

10、运行项目，访问上传页，我这里直接书写在index.html中了

11、测试：如下图所示，可以正常显示进度

12、上传成功后，后台资源文件夹中也能看到对应的上传文件，演示成功！

上述我们讲解了如何实现上传进度条功能，有了这个思路，我们再实现下载功能：

1、同样，我们实现一个简单的进度条页面

2、实现下载方法

这里我们不再采用ajax的方法，而是直接通过xhr请求，并且因为要在浏览器中下载该文件，所以以window.URL.revokeObjectURL方法来下载并释放该文件。

3、实现后端下载文件接口

这里与上传文件不同的是，前端在进行文件上传时，是可以获取到文件的总大小的，而下载文件时因为是流式下载，前端是不知道要下载的文件一共有多少大小的。

因此也就无法估算总体的进度比例。所以我们后端接口中要通过Content-Length响应头指定文件的总大小

我这里为了演示方便，直接下载上述上传的文件。实际应用可更改为你自己的文件下载路径。

4、运行项目

5、测试：文件成功下载，进度也实时显示

以上演示源码可在如下地址下载： https://gitee.com/wuhanxue/progress_bar_demo

以上我们就完成了文件的上传和下载的实时进度监控，虽然这个功能的重点在前端，但是后端通过这个功能点，也能更好的理解前后端请求的交互。

最后我们抛出一个思考问题：如何实时监控后端自定义功能的执行进度？

作者：wu55555链接：https://juejin.cn/post/7238886731058642999

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com