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

下面给大家分享下基于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文件上传进度条、ajax上传进度条、ajax上传文件带进度条、ajax 上传图片进度条、ajax实现上传进度条，以便于您获取更多的相关知识。

时间： 2024-08-22 14:49:39

基于ajax实现文件上传并显示进度条_javascript技巧的相关文章

基于HTML5 Ajax实现文件上传并显示进度条_AJAX相关

本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下 效果图: html5上传是同步上传的方式,所以能够实现进度条的显示.1.上传文件: 首先我们用ajax来取得<input type="file" id="file_upload">的file对象: var file = null; var input = $("#file_upload"); //文件域选择文件时, 执行readFile函数 inpu

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

本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下 效果图: html5上传是同步上传的方式,所以能够实现进度条的显示. 1.上传文件: 首先我们用ajax来取得<input type="file" id="file_upload">的file对象: var file = null; var input = $("#file_upload"); //文件域选择文件时, 执行readFile函数 inp

JS插件plupload.js实现多图上传并显示进度条_javascript技巧

本文实例为大家分享了plupload.js多图上传的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点: 1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路_实用技巧

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

按钮-求多文件上传，带进度条的代码，？

问题描述 求多文件上传,带进度条的代码,? 用java 在mybaitys +struts2+spring 实现多文件上传 点上传按钮显进度条,上传到百分在再显示出图片.最好兼容多个浏览器. 解决方案 建议用FileUpload组件来实现 JAVA学习提高之---- FileUpload组件实现多文件上传 http://blog.csdn.net/luweifeng1983/article/details/3613544 解决方案二: 文件上传是前端的事,不干mybatis.spring,最多和

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)_javascript技巧

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

localResizeIMG先压缩后使用ajax无刷新上传（移动端）_javascript技巧

下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文. 现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片