首页
所有分类
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多种数据类型表格排序代码分析
Sep 11 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
详解JavaScript函数
Dec 01 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
函数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
数据保存(1) 读取(1) pandas(7) apply(1) 数组(5) bs4(1) mp3Play(1) agg(1) 音频(1) 矩阵(1)
You might like
PHP通用检测函数集合
2006/11/25 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
PHP代码维护，重构变困难的4种原因分析
2016/01/25 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python动态加载变量示例分享
2014/02/17 Python
小小聊天室Python代码实现
2016/08/17 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
匡威帆布鞋美国官网：Converse美国
2016/08/22 全球购物
外贸业务员岗位职责
2015/02/13 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
运动员加油词
2015/07/18 职场文书
多表查询、事务、DCL
2021/04/05 MySQL