• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > servlet+jquery实现文件上传进度条示例代码

servlet+jquery实现文件上传进度条示例代码

作者:夢_殤 字体:[增加 减小] 来源:互联网 时间:2017-05-11

夢_殤通过本文主要向大家介绍了jquery ajax servlet,jquery servlet,jquery调用servlet,jquery跳转到servlet,servlet示例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

现在文件的上传,特别是大文件上传,都需要进度条,让客户知道上传进度。

本文简单记录下如何弄进度条,以及一些上传信息,比如文件的大小,上传速度,预计剩余时间等一些相关信息。代码是匆忙下简单写的,一些验证没做,或代码存在一些隐患,不严谨的地方。本文代码只供参考。

进度条的样式多种多样,有些网站弄得非常绚烂漂亮。本文UI端不太懂,只会一些简单的基本的css而已,所以进度条弄得不好看。本文侧重的给读者提供一个参考,一个实现思路而已。

注:由于jQuery版本用的是2.1.1,所以如果跑本例子源码,请用IE9以上或火狐、谷歌浏览器测试。

 

接收文件上传的servlet

UploadFileServlet.Java

package com.fei.servlet; 
 
import java.io.IOException; 
import java.util.Date; 
import java.util.Map; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import com.fei.util.FileUploadUtil; 
 
public class UploadFileServlet extends HttpServlet { 
 
   
  private static final long serialVersionUID = 1L; 
 
  public void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    this.doPost(request, response); 
  } 
 
  public void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    try { 
      long start = System.currentTimeMillis(); 
      System.out.println("开始上传文件........." ); 
      Map<String, String> params = FileUploadUtil.upload(request); 
      System.out.println("文件上传完成........." ); 
      System.out.println("文件上次用时:"+(System.currentTimeMillis()-start)+"毫秒"); 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
  } 
} 
</div>

将上传文件进行下载到服务器的处理

FileUploadUtil.java

package com.fei.util; 
 
import java.io.File; 
import java.util.HashMap; 
import java.util.Iterator; 
import java.util.List; 
import java.util.Map; 
 
import javax.servlet.http.HttpServletRequest; 
 
import org.apache.commons.fileupload.FileItem; 
import org.apache.commons.fileupload.ProgressListener; 
import org.apache.commons.fileupload.disk.DiskFileItemFactory; 
import org.apache.commons.fileupload.servlet.ServletFileUpload; 
 
public class FileUploadUtil { 
 
  /** 
   * 文件上传保存路径 
   */ 
  private static final String SAVE_FILEPATH = "/fileupload/"; 
  /** 
   * 文件上传临时保存路径 
   */ 
  private static final String SAVE_FILE_TMPPATH = "/fileupload/tmp/"; 
  /** 
   * 上传文件的最大值M 
   */ 
  private static final int MAX_FILE_SIZE = 100*1024*1024; 
  /** 
   * 文件数据在内存中超过多少M后,就写入临时文件 
   */ 
  private static final int THRESHOLD_SIZE = 2*1024*1024; 
   
  private static final String ENCODING = "UTF-8"; 
   
  /** 
   * 处理文件上传的表单 
   * 下载文件,并返回文件名称及普通表单域中其它属性值 
   * 获取文件名 
   */ 
  public static Map<String,String> upload(HttpServletRequest request)throws Exception{ 
    Map<String,String> params = new HashMap<String, String>(); 
     
    String savePath = request.getSession().getServletContext() 
        .getRealPath(SAVE_FILEPATH)+ File.separator; 
    String savePathTemp = request.getSession().getServletContext() 
        .getRealPath(SAVE_FILE_TMPPATH)+ File.separator; 
     
    File saveFileTempDir = new File(savePathTemp); 
     
    DiskFileItemFactory factory = new DiskFileItemFactory(); 
    //当内存中文件数据达到THRESHOLD_SIZE后,就写入临时文件中,避免上传大文件时,消化太多内存 
    factory.setSizeThreshold(THRESHOLD_SIZE); 
    factory.setRepository(saveFileTempDir); 
     
    ServletFileUpload upload = new ServletFileUpload(factory); 
    upload.setHeaderEncoding(ENCODING); 
    upload.setSizeMax(MAX_FILE_SIZE); 
     
    FileUploadInfo fileUploadInfo = new FileUploadInfo(); 
    upload.setProgressListener(new FileUploadListener(fileUploadInfo)); 
    request.getSession().setAttribute("uploadInfo", fileUploadInfo); 
     
    List items = upload.parseRequest(request); 
    Iterator iter = items.iterator(); 
    int fileNum = 1; 
    while(iter.hasNext()){ 
      FileItem item = (FileItem) iter.next(); 
      if (item.isFormField()) {//普通表单域 
        params.put(item.getFieldName(), item.getString()); 
      } else { 
        String fileName = item.getName().replace("/", "\\"); 
        int i = fileName.lastIndexOf("\\"); 
        fileName = fileName.substring(i+1); 
        //避免重复 
        fileName = System.currentTimeMillis() + fileName; 
         
        File uploadedFile = new File(savePath + fileName); 
        item.write(uploadedFile); 
         
        params.put("fileName0"+fileNum, fileName); 
        fileNum ++; 
 
      } 
    } 
     
     
    return params; 
  } 
   
} 
 
class FileUploadListener implements ProgressListener{ 
 
  FileUploadInfo fileUploadInfo = null; 
   
  public FileUploadListener(FileUploadInfo fileUploadInfo) { 
    this.fileUploadInfo = fileUploadInfo; 
  } 
   
  @Override 
  public void update(long uploadSize, long totalSize, int itemNum) { 
    this.fileUploadInfo.setTotalSize(totalSize); 
    this.fileUploadInfo.setUploadSize(uploadSize); 
     
  } 
   
} 
</div>

上传文件的一些信息

FileUploadInfo.java

package com.fei.util; 
 
public class FileUploadInfo { 
 
  private final int K = 1024; 
   
  private final int M = K * 1024; 
   
  /** 
   * 总大小 
   */ 
  private long totalSize; 
  /** 
   * 开始上传时间 
   */ 
  private long startTime = System.currentTimeMillis(); 
  /** 
   * 已上传多少 
   */ 
  private long uploadSize; 
   
  /** 
   * 上传速度(K/S) 
   */ 
  public double getUploadSpeed_K(){ 
    long currentTime = System.currentTimeMillis(); 
    long usedTime = currentTime - startTime; 
    if(usedTime == 0.0){ 
      return 0.0; 
    } 
    return getUploadSize_K()/usedTime*1000d; 
  } 
  /** 
   * 获取已上传百分比 
   * @return 
   */ 
  public double getUploadPercent(){ 
    return (getUploadSize()*1.00/getTotalSize())*100d; 
  } 
  /** 
   * 剩余时间(s) 
   * @return 
   */ 
  public double getRemainTime(){ 
    double speedKB = getUploadSpeed_K(); 
    if(speedKB<= 0.00){ 
      return -1d; 
    } 
    return (getTotalSize_K() - getUploadSize_K())/speedKB; 
  } 
  /** 
   * 已上传时间 
   * @return 
   */ 
  public double getUseTime(){ 
    return (System.currentTimeMillis() - startTime)/1000d; 
  } 
   
  public long getTotalSize() { 
    return totalSize; 
  } 
   
  public double getTotalSize_K(){ 
    return getTotalSize()*1.0/K; 
  } 
   
  public double getTotalSize_M(){ 
    return getTotalSize()*1.0/M; 
  } 
   
  public long getUploadSize() { 
    return uploadSize; 
  } 
   
  public double getUploadSize_K(){ 
    return getUploadSize()/K; 
  } 
   
  public double getUploadSize_M(){ 
    return getUploadSize()/M; 
  } 
   
  public void setTotalSize(long totalSize) { 
    this.totalSize = totalSize; 
  } 
   
   
  public void setUploadSize(long uploadSize) { 
    this.uploadSize = uploadSize; 
  } 
   
  private String double2String(double d){ 
    return String.format("%.2f", d); 
  } 
   
  public String toString(){ 
    return "{"+ 
        "'totalSize':'"+double2String(getTotalSize_M())+"M',"+ 
        "'uploadSize':'"+double2Strin



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • servlet+jquery实现文件上传进度条示例代码

相关文章

  • 2017-05-11jQuery图片拖动组件Dropzone用法示例
  • 2017-05-11js常用DOM方法详解
  • 2017-05-11js中常用的Math方法总结
  • 2017-05-11教你用十行node.js代码读取docx的文本
  • 2017-05-11jQuery实现验证码功能
  • 2017-05-11JS实现本地存储信息的方法(基于localStorage与userData)
  • 2017-05-11jq stop()和:is(:animated)的用法及区别(详解)
  • 2017-08-14js回车事件触发
  • 2017-05-11JavaScript实现打地鼠小游戏
  • 2017-05-11javascript实现复选框全选或反选

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JavaScript实现前端实时搜索功能
    • Js实现中国公民身份证号码有效性验证实例代码
    • 完美实现js选项卡切换效果(二)
    • 基于jQuery制作小图标上下滑动特效
    • nodejs个人博客开发第七步 后台登陆
    • js 正则表达式 检查用户名、密码、电话号码
    • jQuery输入框密码的显示隐藏【代码分享】
    • JavaScript 数据类型详解
    • jQuery.Form上传文件操作
    • JavaScript实现定时页面跳转功能示例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有