基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條
更新時(shí)間：2015年08月03日 16:05:42 作者：liangwenmail
這篇文章主要介紹了基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條,需要的朋友可以參考下
下面給大家分享下基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條。在jsp部分，需要設(shè)計(jì)一個(gè)表單，form的屬性添加 enctype="multipart/form-data"，設(shè)計(jì)一個(gè)iframe，作為隱藏。form的target等于iframe的name;
在servlet部分：文件上傳用的Commons-FileupLoad，需要兩個(gè)Jar，commons-fileupload和commons-io,少了第二個(gè)會(huì)報(bào)出找不到類的異常；
第一個(gè)servlet處理上傳，及把上傳進(jìn)度保存到session,第二個(gè)servlet處理ajax請求,回傳session保存的進(jìn)度值；
進(jìn)度條：可以用ajax拿到回傳的進(jìn)度值，改變圖片的width實(shí)現(xiàn)變化；
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里的代碼：
提交后還在當(dāng)前頁顯示進(jìn)度，所以要用到iframe，提交后的返回放到隱藏的iframe里，不影響頁面效果；
css代碼：
復(fù)制代碼 代碼如下:
.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());
}
//回調(diào)函數(shù)
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為上傳成功標(biāo)記，err為出錯(cuò)標(biāo)記；
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 {
//設(shè)置編碼格式為utf-8
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//獲取session，保存進(jìn)度和上傳結(jié)果，上傳結(jié)果初始值為NOK，當(dāng)為Ok表示上傳完成
HttpSession session=request.getSession();
session.setAttribute("prog", "0");
session.setAttribute("result", "NOK");
session.setAttribute("error", "");
String error="";
//給上傳的文件設(shè)一個(gè)最大值，這里是不得超過50MB
int maxSize=50*1024*1024;
//創(chuàng)建工廠對(duì)象和文件上傳對(duì)象
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;
}
//此時(shí)文件暫存在服務(wù)器的內(nèi)存中，構(gòu)造臨時(shí)對(duì)象
File tempFile=new File(fileName);
//指定文件上傳服務(wù)器的目錄及文件名稱
File file=new File("f:\\temp",tempFile.getName());
//構(gòu)造輸入流讀文件
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){
//計(jì)算文件進(jìn)度
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="上傳文件出現(xiàn)錯(cuò)誤:"+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();
}
}
效果圖如下：
以上就是本文的全部內(nèi)容，希望對(duì)大家有所幫助。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于uni-app使用組件的詳細(xì)步驟,文中還介紹了自定義組件的使用方法,本文通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
js判斷一個(gè)對(duì)象是否在一個(gè)對(duì)象數(shù)組中(場景分析)
這篇文章主要介紹了js判斷一個(gè)對(duì)象是否在一個(gè)對(duì)象數(shù)組中，本文通過場景分析給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-08-08
這篇文章主要介紹了基于javascript編寫簡單日歷的相關(guān)資料,需要的朋友可以參考下2016-05-05
JS獲取select的value和text值的簡單實(shí)例
本篇文章主要是對(duì)JS獲取select的value和text值的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
javascript實(shí)現(xiàn)根據(jù)iphone屏幕方向調(diào)用不同樣式表的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)iphone屏幕方向調(diào)用不同樣式表的方法,涉及javascript針對(duì)樣式表動(dòng)態(tài)操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-07-07
理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個(gè)閉包
在閱讀本博文之前，請先閱讀《理解Javascript_13_執(zhí)行模型詳解》 在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問題，這一篇博文將詳細(xì)的說明函數(shù)對(duì)象、作用域鏈與執(zhí)行上下文的關(guān)系。2010-10-10
微信小程序?qū)崿F(xiàn)form表單本地儲(chǔ)存數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)form表單本地儲(chǔ)存數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
jquery的寫法從事web開發(fā)的人員應(yīng)該不會(huì)陌生吧，下面我們要說的是使用js模仿jquery寫法的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
DOM_window對(duì)象屬性之--clipboardData對(duì)象操作代碼
clipboardData 對(duì)象提供了對(duì)于預(yù)定義的剪貼板格式的訪問，以便在編輯操作中使用。2011-02-02
原生js實(shí)現(xiàn)下拉框功能（支持鍵盤事件）
本文主要分享了原生js實(shí)現(xiàn)下拉框（支持鍵盤事件）功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01