首页
所有分类
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 相关文章推荐
js Array操作的最简短最容易理解方法
Dec 09 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
jquery插件treegrid树状表格的使用方法详解（.Net平台）
Jan 03 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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
黑屏(2) SeaTable(1) MutationObserver(1) celery(1) Outlook(1) OOP(1) appdata(1) minio(1) tree shaking(1) Mysql8(2)
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP新手入门学习方法
2011/05/08 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
python绘图方法实例入门
2015/05/19 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python数据可视化实现正态分布（高斯分布）
2019/08/21 Python
Python 装饰器@，对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Django封装交互接口代码
2020/07/12 Python
The Outnet亚太地区：折扣设计师时装店
2019/12/05 全球购物
Ego Shoes官网：英国时髦鞋类品牌
2020/10/19 全球购物
保密承诺书
2014/03/27 职场文书
高一学年自我鉴定范文（3篇）
2014/09/26 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS
python绘制云雨图raincloud plot
2022/08/05 Python