Ajax实现带进度条的文件上传

Ajax实现带进度条的文件上传

文件上传页面运行效果

上传文件并显示进度条运行效果

代码如下;

DiskFileItemFactory factory = new DiskFileItemFactory(); //?ùóú′???????????′′?¨????1¤3§???ó
ServletFileUpload upload = new ServletFileUpload(factory); //′′?¨??????μ?????é?′????ó
public List parseRequest(HttpServletRequst request) throws FileUploadException
request￡oHttpServletRequest???ó?￡
List items = upload.parseRequest(request); // ?a??é?′????ó
public boolean isFormField()
if (!item.isFormField()) {// ????ê?·??a????ó?
?- //′?′|ê???á?2?·?′ú??
}
public String getName();
String fileName=item.getName(); //??è???????
public long getSize()
long upFileSize=item.getSize(); //é?′?????μ?′ó??
int read(byt[] b)
b￡oó?óú???¨????×??úê?×é?￡
byte[] b=new byte[buffer];
while((length=is.read(b))!=-1){
void write(byte[] b,int off, int len)
b￡oó?óú???¨′ó????×??úê?×é?′è?ê????￡
off￡oó?óú???¨ê???bμ?????????á?￡?′ó???????aê?μ?×??ú?á±??′è?á÷???￡
len￡oó?óú???¨?a?′è?μ?×??úê??￡
fos.write(b,0,length); //??????ê?3?á÷?′?áè?μ?ê???
<div id="progressBar" class="prog_border" align="left">
<img src="data:images/progressBar.gif" width="0" height="13" id="imgProgress">
</div>
<span id="progressPercent" style="width:40px;display:none">0%</span>
.prog_border {
height: 15px; /*???è*/
width: 205px; /*?í?è*/
background: #FFFFFF; /*±3?°??é?*/
border: 1px solid #000; /*±????ùê?*/
margin: 0;
padding: 0;
display:none; /*2???ê?*/
position:relative;
left:55px;
float:left; /*?ó×ó????*/
}
function deal(form){
form.submit(); //?á??±íμ￥
timer=window.setInterval("getProgress()",500); //????500oá????è???′?é?′????è
}
public void uploadFile(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
HttpSession session=request.getSession();
session.setAttribute("progressBar",0); //?¨?????¨é?′????èμ?Session±?á?
String error = "";
int maxSize=50*1024*1024; //μ￥??é?′?????′ó??μ?é???
DiskFileItemFactory factory = new DiskFileItemFactory(); //?ùóú′???????????′′?¨????1¤3§???ó
ServletFileUpload upload = new ServletFileUpload(factory); //′′?¨??????μ?????é?′????ó
try {
List items = upload.parseRequest(request); // ?a??é?′????ó
Iterator itr = items.iterator();// ???ù·?·¨
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next(); //??è?FileItem???ó
if (!item.isFormField()) {// ????ê?·??a????
if (item.getName() != null && !item.getName().equals("")) { // ????ê?·?????á?????
long upFileSize=item.getSize(); //é?′?????μ?′ó??
String fileName=item.getName(); //??è???????
if(upFileSize>maxSize){
error="?úé?′?μ???????′ó￡???????2?3?1?50Mμ?????";
break;
}
// ′?ê±??????′??ú·????÷μ??ú′???
File tempFile = new File(fileName); // 11??áùê±???ó
//??è??ù??????ó|μ???êμ??àí?·??
File file = new File(request.getRealPath("/upload"),tempFile.getName());
InputStream is=item.getInputStream();
int buffer=1024; //?¨???o3???μ?′ó??
int length=0;
byte[] b=new byte[buffer];
double percent=0;
FileOutputStream fos=new FileOutputStream(file);
while((length=is.read(b))!=-1){
percent+=length/(double)upFileSize*100D; //????é?′?????μ?°ù·?±è
fos.write(b,0,length); //??????ê?3?á÷?′?áè?μ?ê???
//??é?′?°ù·?±è±￡′?μ?Session??
session.setAttribute("progressBar",Math.round(percent));
}
Thread.sleep(1000); //??3?????1??
} else {
error="??ó?????é?′?????￡?";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "é?′?????3???′í?ó￡o" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp").forward(request, response);
}else {
request.setAttribute("result", "????é?′?3é1|￡?");
request.getRequestDispatcher("upFile_deal.jsp").forward(request, response);
}
}
<script language="javascript" src="JS/AjaxRequest.js"></script>
function getProgress(){
var loader=new net.AjaxRequest("showProgress.jsp?nocache="+new Date().getTime(),deal_p,onerror,"GET");
}
<%@page contentType="text/html" pageEncoding="UTF-8"%>
${progressBar}
function deal_p(){
var h=this.req.responseText; //??è?íê3éμ?°ù·?±è
h=h.replace(/\s/g,""); //è￥3?×?·?′???μ?Unicode??°×·?
document.getElementById("progressPercent").style.display=""; //??ê?°ù·?±è
progressPercent.innerHTML=h+"%"; //??ê?íê3éμ?°ù·?±è
document.getElementById("progressBar").style.display="block"; //??ê????è??
document.getElementById("imgProgress").width=h*(205/100); //??ê?íê3éμ????è
}
function onerror(){
alert("3?′íá?");
}