基于ajax实现文件上传并显示进度条_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:41:26

基于ajax实现文件上传并显示进度条_javascript技巧

基于ajax实现文件上传并显示进度条_javascript技巧:下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分，需要设计一个表单，form的属性添加 enctype=multipart/form-data，设计一个iframe，作为隐藏。form的target等于iframe的name; 在servlet部分：文件上传用的Commons-Fi

推荐度：

点击下载本文 文档为doc格式

导读基于ajax实现文件上传并显示进度条_javascript技巧:下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分，需要设计一个表单，form的属性添加 enctype=multipart/form-data，设计一个iframe，作为隐藏。form的target等于iframe的name; 在servlet部分：文件上传用的Commons-Fi

下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分，需要设计一个表单，form的属性添加 enctype="multipart/form-data"，设计一个iframe，作为隐藏。form的target等于iframe的name;

在servlet部分：文件上传用的Commons-FileupLoad，需要两个Jar，commons-fileupload和commons-io,少了第二个会报出找不到类的异常；

第一个servlet处理上传，及把上传进度保存到session,第二个servlet处理ajax请求,回传session保存的进度值；

进度条：可以用ajax拿到回传的进度值，改变图片的width实现变化；

jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>




Insert title here

这是index.jsp里的代码：

提交后还在当前页显示进度，所以要用到iframe，提交后的返回放到隐藏的iframe里，不影响页面效果；

css代码：

代码如下:
.pro{
height:15px;
width:500px;
background: #FFFFF0;
border: 1px solid #8FBC8F;
margin: 0;
padding: 0;
display:none;
position: relative;
left:25px;
float:left;
}

js代码

flag为上传成功标记，err为出错标记；

servlet代码（UploadServlet）：

不要忘记commons-io包

servlet代码（getProgressServlet）：

效果图如下：