`
312350968
  • 浏览: 212165 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

使用jQuery+SWFUpload+Commons-FileUpload实现带进度条的上传

 
阅读更多

 

注:摘自http://theoffspring.iteye.com/blog/1480092,这里只是做个备份,供自己学习使用!

 

这两天在找一个可以实现上传时显示进度的ajax库，看了很多10 best ajax uploader之类的文章，发现里面很多链接都点不进去，或者网站文档和demo做得很烂，我这人选开源软件用，一定会看他的文档做得怎么样，做得不全就懒得研究了，swfupload文档做得也不好，例子太少，没有讲解，不过本着矬子里面拔高个的原则只能将就着用它了。外国有个人实现了一个swfuload的jquery插件，主要是完善swfupload的事件机制的，可以点这里去看看,结合这个插件，做多文件上传加进度条是件很easy的事情。官网的例子偏偏没有后端是java的例子，我又google了一番，试用了一下commons-fileupload，感觉很方便，于是就整出了一个例子来，前端是参照这个做了些修改。btw,iteye有好几篇是讲swfupload+java实现上传的，后端是个jsp自己实现的保存上传文件的，我下载了一下代码，发现一模一样，也不知是谁抄谁的，都宣称原创，好笑。

 

1.前面选择上传文件的页面upload.jsp

 

Xml代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  2.          pageEncoding="ISO-8859-1" %>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7.     <title>Insert title here</title>  
  8.     <link href="css/default.css" rel="stylesheet" type="text/css"/>  
  9.     <script type="text/javascript" src="js/swfupload.js"></script>  
  10.     <script type="text/javascript" src="js/swfupload.queue.js"></script>  
  11.     <script type="text/javascript" src="js/fileprogress.js"></script>  
  12.     <script type="text/javascript" src="js/handlers.js"></script>  
  13.     <script type="text/javascript" src="js/jquery-1.4.3.js"></script>  
  14.     <script type="text/javascript" src="js/jquery.swfupload.js"></script>  
  15.   
  16.     <style type="text/css">  
  17.         #swfupload-control p {  
  18.             margin: 10px 5px;  
  19.             font-size: 0.9em;  
  20.         }  
  21.   
  22.         #log {  
  23.             margin: 0;  
  24.             padding: 0;  
  25.             width: 500px;  
  26.         }  
  27.   
  28.         #log li {  
  29.             list-style-position: inside;  
  30.             margin: 2px;  
  31.             border: 1px solid #ccc;  
  32.             padding: 10px;  
  33.             font-size: 15px;  
  34.             font-family: Arial, Helvetica, sans-serif;  
  35.             color: #333;  
  36.             background: #fff;  
  37.             position: relative;  
  38.         }  
  39.   
  40.         #log li .progressbar {  
  41.             border: 1px solid #333;  
  42.             height: 18px;  
  43.             background: #fff;  
  44.         }  
  45.   
  46.         #log li .progress {  
  47.             background: rgba(104, 133, 127, 0.52);  
  48.             width: 0%;  
  49.             height: 18px;  
  50.         }  
  51.   
  52.         #log li p {  
  53.             margin: 0;  
  54.             line-height: 18px;  
  55.         }  
  56.   
  57.         #log li.success {  
  58.             border: 1px solid #339933;  
  59.             background: #ccf9b9;  
  60.         }  
  61.   
  62.         #log li span.stopUpload {  
  63.             position: absolute;  
  64.             top: 5px;  
  65.             right: 5px;  
  66.             width: 20px;  
  67.             height: 20px;  
  68.             background: url('js/swfupload/cancel.png') no-repeat;  
  69.             cursor: pointer;  
  70.         }  
  71.   
  72.         #img span.cancel {  
  73.             background: url('js/swfupload/cancel.png') no-repeat;  
  74.         }  
  75.     </style>  
  76.   
  77.     <script type="text/javascript">  
  78.         $(function () {  
  79.             $('#swfupload-control').swfupload({  
  80.                 upload_url:"handler/doUpload",  
  81.                 file_post_name:'uploadfile',  
  82.                 file_size_limit:"20000 MB",  
  83.                 file_types:"*.*",  
  84.                 file_types_description:"All files",  
  85.                 flash_url:"js/swfupload.swf",  
  86.                 button_image_url:'js/swfupload/wdp_buttons_upload_114x29.png',  
  87.                 button_width:114,  
  88.                 button_height:29,  
  89.                 button_placeholder:$('#button')[0],  
  90.             })  
  91.                     .bind('fileQueued', function (event, file) {  
  92.                         var listitem = '<li id="' + file.id + '" >' +  
  93.                                 'File: <em>' + file.name + '</em> (' + Math.round(file.size / 1024) + ' KB) <span class="progressvalue" ></span>' +  
  94.                                 '<div class="progressbar" ><div class="progress" ></div></div>' +  
  95.                                 '<p class="status" >Pending</p>' +  
  96.                                 '<span class="stopUpload" >&nbsp;</span>' +  
  97.                                 '</li>';  
  98.                         $('#log').append(listitem);  
  99.                         $('li#' + file.id + ' .stopUpload').bind('click', function () { //Remove from queue on cancel click  
  100.                             var swfu = $.swfupload.getInstance('#swfupload-control');  
  101.                             swfu.cancelUpload(file.id);  
  102.                             $('#log li#' + file.id).find('p.status').text('Canceled');  
  103.                             $('#log li#' + file.id).find('span.stopUpload').css('background-image','none')  
  104.                             $('#log li#' + file.id).find('span.stopUpload').css('cursor','defult')  
  105. //                            $('li#' + file.id).slideUp('fast');  
  106.                         });  
  107.                         // start the upload since it's queued  
  108.                         $(this).swfupload('startUpload');  
  109.                     })  
  110.                     .bind('fileQueueError', function (event, file, errorCode, message) {  
  111.                         //alert('Size of the file '+file.name+' is greater than limit');  
  112.                         alert(errorCode+":"+message)  
  113.   
  114.                     })  
  115.                     .bind('fileDialogComplete', function (event, numFilesSelected, numFilesQueued) {  
  116.                         $('#queuestatus').text('Files Selected: ' + numFilesSelected + ' / Queued Files: ' + numFilesQueued);  
  117.                     })  
  118.                     .bind('uploadStart', function (event, file) {  
  119.                         $('#log li#' + file.id).find('p.status').text('Uploading...');  
  120.                         $('#log li#' + file.id).find('span.progressvalue').text('0%');  
  121.                         $('#log li#' + file.id).find('span.cancel').hide();  
  122.                     })  
  123.                     .bind('uploadProgress', function (event, file, bytesLoaded) {  
  124.                         //Show Progress  
  125.                         var percentage = Math.round((bytesLoaded / file.size) * 100);  
  126.                         $('#log li#' + file.id).find('div.progress').css('width', percentage + '%');  
  127.                         $('#log li#' + file.id).find('span.progressvalue').text(percentage + '%');  
  128.                     })  
  129.                     .bind('uploadSuccess', function (event, file, serverData) {  
  130.                         var item = $('#log li#' + file.id);  
  131.                         item.find('div.progress').css('width', '100%');  
  132.                         item.find('span.progressvalue').text('100%');  
  133.                         item.addClass('success').find('p.status').html('Done!!! ');  
  134.                         $('#log li#' + file.id).find('span.stopUpload').css('background-image','none') ;  
  135.                         $('#log li#' + file.id).find('span.stopUpload').css('cursor','default') ;  
  136.                     })  
  137.                     .bind('uploadComplete', function (event, file) {  
  138.                         // upload has completed, try the next one in the queue  
  139.                         $(this).swfupload('startUpload');  
  140.                     })  
  141.         });  
  142.     </script>  
  143. </head>  
  144. <body>  
  145.   
  146. <div id="swfupload-control">  
  147.     <p>Select files of any type, muliple files are allowed to select every time.</p>  
  148.     <input type="button" id="button"/>  
  149.   
  150.     <p id="queuestatus"></p>  
  151.     <ol id="log"></ol>  
  152. </div>  
  153. </body>  
  154. </html>  

 取消按钮的那个class如果叫cancel(原始例子是叫这个名字的)，是不好用的，html里总是有一些诡异的保留字在等着我们，我改成stopUpload就好用了。

 

 2.后端保存文件的servlet

 

Java代码   收藏代码
  1. package com.offspring.servlet;  
  2.   
  3.   
  4. import org.apache.commons.fileupload.FileItem;  
  5. import org.apache.commons.fileupload.FileUploadException;  
  6. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  7. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  8.   
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11. import java.io.File;  
  12. import java.io.IOException;  
  13. import java.util.Iterator;  
  14. import java.util.List;  
  15.   
  16. public class Upload extends javax.servlet.http.HttpServlet {  
  17.     public static final int MB = 1024 * 1024;  
  18.   
  19.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {  
  20.   
  21.         DiskFileItemFactory fileItemFactory = new DiskFileItemFactory(10 * MB, new File("d:/temp4"));  
  22.         ServletFileUpload uploader = new ServletFileUpload(fileItemFactory);  
  23.         uploader.setSizeMax(1200 * MB);  
  24.         List fields = null;  
  25.         try {  
  26.             fields = uploader.parseRequest(request);  
  27.         } catch (FileUploadException e) {  
  28.             e.printStackTrace();  
  29.             return;  
  30.         }  
  31.         Iterator iter = fields.iterator();  
  32.         while (iter.hasNext()) {  
  33.             FileItem item = (FileItem) iter.next();  
  34.   
  35.             if (!item.isFormField()) {  
  36.                 try {  
  37.                     processUploadedFile(item);  
  38.                 } catch (Exception e) {  
  39.                     e.printStackTrace();  
  40.                    return;  
  41.                 }  
  42.             }  
  43.         }  
  44.   
  45.         response.getOutputStream().println("200 OK");  
  46.   
  47.   
  48.     }  
  49.   
  50.     private void processUploadedFile(FileItem item) throws Exception {  
  51.         String basePath = "d:\\temp\\upload\\";  
  52.         item.write(new File(basePath + item.getName()));  
  53.         System.out.println("write file to '"+basePath + item.getName()+"'");  
  54.     }  
  55.   
  56. }  

 运行时截图：

 

 你同时选多个文件也是可以的，不过仍然一次上传一个，一个传完了，下一个会自动开启上传。

 

3.实现进度条的原理

   swfupload提供了很多事件，结合jquery可以绑定相应的回调函数， 比如uploadProgress会在上传过程中定期被触发，你在这个回调里写个用css更新进度条宽度就OK了。

 

  • flashReady
  • swfUploadLoaded
  • fileDialogStart
  • fileQueued
  • fileQueueError
  • fileDialogComplete
  • uploadStart
  • uploadProgress
  • uploadError
  • uploadSuccess
  • uploadComplete 

    •  

    Js代码   收藏代码
    1. .bind('uploadProgress', function (event, file, bytesLoaded) {  
    2.   //Show Progress  
    3.  var percentage = Math.round((bytesLoaded / file.size) * 100);  
    4.  $('#log li#' + file.id).find('div.progress').css('width', percentage + '%');  
    5.  $('#log li#' + file.id).find('span.progressvalue').text(percentage + '%');  
    6.   })  

     
    不过记得在linux上 uploadProgress 只会在上传结束时才触发，这是linux上flash的一个bug。本来写得很多，在firefox上上传附件不好用，然后文字还变成了乱码，这是怎么搞的？

     

    分享到：
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

      jquery+SWFUpload+COS上传组件的使用

      jquery+SWFUpload+COS上传组件的使用 jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件...

      SWFUpload+commons-fileupload 上传文件

      本文将详细介绍如何将SWFUpload与Apache Commons Fileupload结合，以实现高效的、用户友好的文件上传解决方案。 ### 1. SWFUpload简介 SWFUpload是一款开源的JavaScript库，通过Flash技术实现文件预览、进度条显示...

      jquery+SWFUpload+COS上传组件的使用.doc

      《jQuery + SWFUpload + COS 上传组件的使用详解》 在现代网页开发中，文件上传功能是不可或缺的一部分。jQuery + SWFUpload + COS（腾讯云对象存储）上传组件提供了一种高效、友好的文件上传解决方案。本文档旨在...

      jquery+swfupload+servlet_多文件上传

      **jQuery + SWFUpload + Servlet 多文件上传技术详解** 在Web开发中，用户往往需要上传多个文件，例如图片、文档等。传统的HTML表单上传方式存在诸多限制，如文件大小限制、一次只能上传一个文件等。为了克服这些...

      jquery+swfupload+servlet_多文件上传,支持ctrl和shift多选择的功能

      本文将深入探讨如何使用jQuery、SWFUpload和Servlet技术实现一个支持多文件上传，同时具备Ctrl和Shift键多选功能的高效解决方案。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果...

      自制jquery+SWFUpload+COS 多文件上传组件

      在这个组件中，COS作为后端的文件存储解决方案，接收并保存由SWFUpload上传的文件。 在实际使用中，开发者可能需要配置以下关键步骤： 1. **设置SWFUpload**: 配置SWFUpload的各项参数，如文件类型限制、最大文件...

      jquery+SWFUpload+COS上传组件的使用 兼容ie6

      SWFUpload是一款基于Flash的文件上传插件，它能够实现多文件选择、进度条显示等功能。在IE6时代，由于HTML5的File API不被支持，所以利用Flash技术是实现复杂上传功能的常见方法。SWFUpload的工作原理是通过Flash...

      swfupload+fileupload文件批量上传，带进度条百分比显示

      在描述中提到的项目，显然利用了SWFUpload与FileUpload的组合，来实现带有进度条百分比显示的文件批量上传功能，并且可以在Eclipse环境中直接运行，这通常意味着该项目是一个基于Java的Web应用。 1. **SWFUpload...

      Struts+swfupload实现文件上传功能

      Struts和SwfUpload是两种在Web开发中用于构建强大功能的应用工具，它们结合使用可以实现高效的文件上传功能。在本文中，我们将深入探讨这两个组件以及如何将它们整合以实现文件上传。 首先，Struts是一个基于MVC...

      java+struts+swfupload文件上传下载

      2. **创建Struts Action**：在Struts框架中创建一个Action类，用于接收SwfUpload上传的文件。这个Action需要继承自Struts的抽象类，并覆盖上传方法。 3. **处理上传请求**：在Action的上传方法中，使用Java的IO流...

      extjs+swfupload实现多文件上传下载删除带进度条

      本篇将详细讲解如何利用`ExtJS`和`SwfUpload`来创建一个支持多文件上传、下载和删除，并带有进度条显示的系统。 `ExtJS`是一个基于JavaScript的UI框架，它提供了丰富的组件库和强大的数据绑定机制，可以构建出复杂...

      swfupload多文件上传带进度条实例

      **SWFUpload 多文件上传带进度条实例详解** SWFUpload 是一款开源的JavaScript库，专门用于在网页上实现文件的多选上传，并且支持显示上传进度条，为用户提供更好的交互体验。在这个实例中，我们将探讨如何在VS2012...

      JQ + swfupload 多文件上传

      "JQ + swfupload 多文件上传"是一种使用JavaScript库jQuery（简称JQ）和Flash插件SwfUpload实现的多文件上传解决方案。下面将详细解释这一技术的实现原理、优势以及如何运用。 SwfUpload是一款开源的Flash上传组件...

      swfupload使用org.apache.commons.fileupload 实现上传文件

      在本教程中，我们将深入探讨如何使用SwfUpload与`org.apache.commons.fileupload`库来实现文件上传功能。 Apache Commons FileUpload 是一个Java库，专门用于处理HTTP请求中的多部分数据，也就是通常用于文件上传的...

      php+swfupload+jquery上传文件，仿163邮箱上传

      本教程将详述如何使用PHP、SWFUpload和jQuery来实现一个类似163邮箱的文件上传功能。这个功能不仅提供了直观的用户界面，还包含了多项实用特性。 首先，SWFUpload是一个JavaScript库，它利用Flash技术实现文件的...

      一个Ext2+SWFUpload做的图片上传对话框的例程

      本例程“一个Ext2+SWFUpload做的图片上传对话框”提供了一个高效且用户友好的解决方案，用于在Web应用中实现图片上传。下面我们将详细探讨这个例程涉及的技术和知识点。 首先，`Ext2`是Ext JS的一个早期版本，这是...

      Extjs3.3+swfUpload2.2实现多文件上传组件.pdf

      该组件的实现主要基于 swfUpload2.2，swfUpload 是一个基于 Flash 的文件上传控件，可以实现多文件上传和进度条显示。Extjs3.3 提供了强大的 UI 组件和事件处理机制，用于与 swfUpload2.2 进行集成。 swfUpload2.2 ...

      Struts2+SWFUpload上传文件并显示进度条

      4. **创建前端界面**：使用SWFUpload提供的JavaScript API，创建上传按钮和进度条。当用户选择文件并触发上传时，SWFUpload会调用Action中的方法进行文件上传，并通过回调函数更新进度条。 5. **设置回调函数**：...

    Magicbox
    Global site tag (gtag.js) - Google Analytics