ajax实现带进度条的文件上传
- - CSDN博客编程语言推荐文章jsp部分：设计一个表单，form的属性添加 enctype="multipart/form-data"，设计一个iframe，设为隐藏. form的target等于iframe的name;. servlet部分：文件上传用的Commons-FileupLoad，需要两个Jar，commons-fileupload和commons-io,少了第二个会报出找不到类的异常；.
ajax实现带进度条的文件上传
标签：
ajax
文件
上传
| 发表时间：2015-08-03 03:06 | 作者：liangwenmail
出处：http://blog.csdn.net
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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/progress.css">
<script type="text/javascript" src="js/ul.js" charset="gbk"></script>
</head>
<body>
<form action="UploadServlet" name="f1" id="f1" method="post" enctype="multipart/form-data" target="if">
<input type="file" name="file1" /><br><br>
<input type="reset" name="res1" value="重置"/>
<input type="button" name="but1" value="提交" onclick="go();"/>
</form><br>
<div id="pro" class="pro" align="left">
<img alt="" src="photo/progress.png" width="0" height="15" id="imgpro">
</div>
<span id="prop" style="width:15px;height:15px;display: none;">0%</span>
<iframe id="if" name="if" src="" style="display: none"></iframe>
</body>
</html>
这是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代码
function go(){
f1.submit();
document.getElementById("pro").style.display="block";
document.getElementById("prop").style.display="";
timer=setInterval("getP()",50);
}
var xmlHttpRequest;
function getP(){
if(window.XmlHttpRequest){
xmlHttpRequest=new XmlHttpRequest();
}else{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpRequest.onreadystatechange=callBack;
url="getProgressServlet";
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttpRequest.send("&timeStamp="+(new Date()).getTime());
}
//回调函数
function callBack(){
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
result=xmlHttpRequest.responseText;
var result=result.replace(/(^\s*)|(\s*$)/g, "");
var res=result.split(",");
var flag=res[1];
var per=parseInt(res[0]);
var err=res[2];
document.getElementById("imgpro").style.width=per*5+"px";
document.getElementById("prop").innerHTML=per+"%";
if(flag=="OK"){
window.clearInterval(timer);
alert("上传成功！");
document.getElementById("pro").style.display="none";
document.getElementById("prop").innerHTML="";
f1.reset();
}
if(err!=""||err.length>0){
window.clearInterval(timer);
alert(err);
}
if(flag==null){
window.clearInterval(timer);
}
}
} flag为上传成功标记，err为出错标记；
servlet代码（UploadServlet）：
package com.ul.servlet;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class UploadServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码格式为utf-8
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//获取session，保存进度和上传结果，上传结果初始值为NOK，当为Ok表示上传完成
HttpSession session=request.getSession();
session.setAttribute("prog", "0");
session.setAttribute("result", "NOK");
session.setAttribute("error", "");
String error="";
//给上传的文件设一个最大值，这里是不得超过50MB
int maxSize=50*1024*1024;
//创建工厂对象和文件上传对象
DiskFileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
try {
//解析上传请求
List items=upload.parseRequest(request);
Iterator itr=items.iterator();
while(itr.hasNext()){
FileItem item=(FileItem)itr.next();
//判断是否为文件域
if(!item.isFormField()){
if(item.getName()!=null&&!item.getName().equals("")){
//获取上传文件大小和文件名称
long upFileSize=item.getSize();
String fileName=item.getName();
if(upFileSize>maxSize){
error="您上传的文件太大了，请选择不超过50MB的文件!";
break;
}
//此时文件暂存在服务器的内存中，构造临时对象
File tempFile=new File(fileName);
//指定文件上传服务器的目录及文件名称
File file=new File("f:\\temp",tempFile.getName());
//构造输入流读文件
InputStream is=item.getInputStream();
int length=0;
byte[] by=new byte[1024];
double persent=0;
FileOutputStream fos=new FileOutputStream(file);
PrintWriter out=response.getWriter();
while((length=is.read(by))!=-1){
//计算文件进度
persent+=length/(double)upFileSize*100D;
fos.write(by, 0, length);
session.setAttribute("prog", Math.round(persent)+"");
Thread.sleep(10);
}
fos.close();
Thread.sleep(1000);
}else{
error="没选择上传文件！";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error="上传文件出现错误:"+e.getMessage();
}
if(!error.equals("")){
session.setAttribute("error", error);
}else{
session.setAttribute("result", "OK");
}
}
}
不要忘记commons-io包
servlet代码（getProgressServlet）：
package com.ul.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class getProgressServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
HttpSession sesson=request.getSession();
PrintWriter out=response.getWriter();
String str=(String)sesson.getAttribute("prog")+"";
String res=(String)sesson.getAttribute("result");
String err=(String)sesson.getAttribute("error");
System.out.println(str+","+res+","+err);
out.print(str+","+res+","+err);
out.flush();
out.close();
}
}
作者：liangwenmail 发表于2015/8/2 19:06:35 原文链接
阅读：47 评论：0 查看评论
相关 [ajax 文件 上传] 推荐：
基于HTML5的可预览多图片Ajax上传
- Lynn - 张鑫旭-鑫空间-鑫生活本文地址：http://www.zhangxinxu.com/wordpress/?p=1923. 在XHTML的时代，我们使用HTML file控件上传图片一次只能上传一张. 要一次上传多图，做法是借助于flash. 可惜，使用复杂的点，比如flash文件需与页面同父文件夹，JavaScript文件大小也很可观.
html5拖拽图片批量ajax无刷新进度上传
- - Web前端 - ITeye博客之前有篇文章说到HTML5的拖拽（. 这里说的拖拽图片只是弱化了拖的概念，而强化了拽的操作. 从浏览器外部拖动一个文件到浏览器中来，如：. 拖动文件到浏览器之后，就会打开浏览器支持的文件，如常用的txt、图片等，如下：. 操作如上常用文件，一般都有默认行为来处理这样的事件. 这里说的拖拽上传也是一个道理，就是要做的是从浏览器外部拖动文件到浏览器中来，并且在当前页面上传该文件.
Ajax上传图片以及上传之前先预览 - 江南一点雨的专栏 - CSDN博客
- -手头上有几个小项目用到了easyUI，一开始决定使用easyUI就注定了项目整体上前后端分离，基本上所有的请求都采用Ajax来完成. 在文件上传的时候用到了Ajax上传文件，以及图片在上传之前的预览效果，解决了这两个小问题，和小伙伴们分享下. 先来说说图片上传之前的预览问题. 这里主要采用了HTML5中的FileReader对象来实现，关于FileReader对象，如果小伙伴们不了解，可以查看这篇博客HTML5学习之FileReader接口.
原生AJAX
- - Web前端 - ITeye博客对象是ajax的基础，几乎所有的浏览器都支持他，只是创建方式不同，如IE5，IE6. 2、AJAX - 向服务器发送请求请求. 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用. 然而，在以下情况中，请使用 POST 请求：. 无法使用缓存文件（更新服务器上的文件或数据库）. 向服务器发送大量数据（POST 没有数据量限制）.
初识Ajax
- - CSDN博客推荐文章Ajax(Asynchronous JavaScript and XMLS异步JavaScript和XML)(“阿贾克斯”)技术. 完成页面的局部刷新，从而提升操作性能. AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术. 依赖的核心对象：XMLHttpRequest.
多文件上传
- - BlogJava-首页技术区多文件上传 jquery的插件. 使用的方法 导入 jquery.js 及 jquery.MultiFile.js ，. 方式一： 后台是文件数组 . private File[] upload; // 与jsp表单中的名称对应. 在 form 中加入 即可.
jquery ajax 跨域请求
- - 博客园_首页使用 jquery 中的ajax 进行跨域请求. 说明：dataType 为 "jsonp" ；type 只能为 GET. //处理错误. 后台处理代码 ValidAccountsExists.aspx.
ajax核心js代码
- - ITeye博客 //针对firefox,mozillar,opera,safari,IE7,IE8. //针对某些特定版本的mozillar浏览器的bug进行修正. //针对IE6,IE5.5,IE5.
异步上传文件
- - Web前端 - ITeye博客通过iframe来实现无刷新的的文件上传，其实是有刷新的，只是在iframe里面隐藏了而已. form里面的target要与iframe里面的id的值相等，指示是form相应了post事件，也就是post时间相应的时候刷新的是iframe而不是整个页面. 用户名:
上传头像:
上传头像: