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="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?′íá?");
}