首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 03, 2015

下面给大家分享下基于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"%>
<!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();
 }

}

效果图如下：

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

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

以上就是本文的全部内容，希望对大家有所帮助。

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

- Author -

liangwenmail

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
js省市区级联查询（插件版&amp;无插件版）
Mar 21 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 #Javascript
百度地图api如何使用
Aug 03 #Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 #Javascript
如何用js 实现依赖注入的思想，后端框架思想搬到前端来
Aug 03 #Javascript
javascript常见数据验证插件大全
Aug 03 #Javascript
javascript自定义in_array()函数实现方法
Aug 03 #Javascript
JavaScript简单修改窗口大小的方法
Aug 03 #Javascript
i5 9400(1) win11(40) 速龙(1) GTX1660(1) ipad(1) Tomcat(18) win10(43) i5 10400(1) i7 6700(1) React(6)
You might like
图象函数中的中文显示
2006/10/09 PHP
PHP 远程关机实现代码
2009/11/10 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
Python读写文件方法总结
2015/06/09 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python内置函数OCT详解
2016/11/09 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）
2016/12/14 HTML / CSS
维珍澳洲航空官网：Virgin Australia
2017/09/08 全球购物
西班牙高科技产品购物网站：MejorDeseo
2019/09/08 全球购物
国际花店：Pickup Flowers
2020/04/10 全球购物
2014年村党支部工作总结
2014/12/04 职场文书
中学教师教学工作总结
2015/08/13 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
优胜劣汰，强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python