由于jquery.uploadify是基于flash的jquery上传控件，客户老是说出问题，所以今天换成了一个纯js的异步上传控件。

这方面的资料很少，故此记下来分享一下。

项目地址：Fine Uploader

1.jsp页面：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@ page language="java" import="java.util.*"%>
  4. <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
  5. <%
  6. String path = request.getContextPath();
  7. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  8. %>
  9. <!DOCTYPE html>
  10. <html>
  11.   <head>
  12.     <meta charset="utf-8">
  13.     <title>Fine Uploader Demo</title>
  14.     <link href="./plugins/jquery.fineuploader-3.7.1/fineuploader-3.7.1.min.css" rel="stylesheet"> <!-- 样式 -->
  15.   </head>
  16.   <body>
  17.     <div id="jquery-wrapped-fine-uploader"></div>
  18.     <div id="triggerUpload">上传</div>
  19.      <script type="text/javascript" src="./plugins/jquery/jquery-1.7.min.js"></script> <!-- jquery -->
  20.     <script src="./plugins/jquery.fineuploader-3.7.1/jquery.fineuploader-3.7.1.min.js"></script> <!-- Fine Uploader -->
  21.     <script>
  22.     $(document).ready(function () {
  23.         $('#jquery-wrapped-fine-uploader').fineUploader({
  24.           request: {
  25.             endpoint: 'fineUpload.action'                           //处理文件上传的action
  26.           },
  27.           text: {
  28.               uploadButton: '选择上传文件'                            //上传按钮的文字
  29.           },
  30.           multiple: false,                                           //是否为多文件上传
  31.           validation: {
  32.               allowedExtensions: ['apk', 'rar', 'zip',], //限制上传格式
  33.               sizeLimit: 1024* 1024* 1024 * 1024 * 1024              //限制上传大小
  34.           },
  35.           autoUpload: false,                                         //是否自动提交
  36.           editFilename: {                                            //编辑名字
  37.               enable: true
  38.           }
  39.         }).on({                                                       //注册监听事件
  40.             "complete": function(event, id, fileName, responseJSON) { //完成
  41.                 if(responseJSON.success) {
  42.                     alert(responseJSON.success);
  43.                 }
  44.             },
  45.             "cancel": function(event, id,fileName){                   //取消
  46.                 alert(fileName);
  47.             },
    　　　　　　　"submit": function(event, id, fileName) {                 //选择文件后
    　　　　　　　　　alert('文件选择');
    　　　　　　　}
  48.             "error": function(event, id, fileName, reason) {          //出错,这里还有些其他事件，我暂时不用就没实践，大家可以自己去看api
  49.                 alert(reason);
  50.             }
  51.         });
  52.       });
  53.  
  54.        $("#triggerUpload").click(function() {                         //手动提交
  55.            $('#jquery-wrapped-fine-uploader').fineUploader('uploadStoredFiles');
  56.        });
  57.     </script>
  58.   </body>
  59. </html>

这种配置方法是基于jquery的，官方还有基于原生js的。

2. struts2的action:

  1. package cn.zyc.action;
  2.  
  3. import java.io.File;
  4. import java.io.FileInputStream;
  5. import java.io.FileNotFoundException;
  6. import java.io.FileOutputStream;
  7. import java.io.IOException;
  8. import java.io.PrintWriter;
  9.  
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import org.apache.struts2.ServletActionContext;
  14. import org.apache.struts2.convention.annotation.Action;
  15.  
  16. import cn.zyc.util.ActionUtil;
  17.  
  18. import com.opensymphony.xwork2.ActionSupport;
  19.  
  20. public class FineUploadTest extends ActionSupport{
  21.     private File qqfile;             //上传文件的name,默认就是这个
  22.     private String qqfileFileName;   //上传文件名
  23.  
  24.     HttpServletResponse response = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
  25.     HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
  26.  
  27.     public File getQqfile() {
  28.         return qqfile;
  29.     }
  30.  
  31.     public void setQqfile(File qqfile) {
  32.         this.qqfile = qqfile;
  33.     }
  34.  
  35.     public String getQqfileFileName() {
  36.         return qqfileFileName;
  37.     }
  38.  
  39.     public void setQqfileFileName(String qqfileFileName) {
  40.         this.qqfileFileName = qqfileFileName;
  41.     }
  42.  
  43.     @Action(value="fineUpload")
  44.     public void fineUpload(){
  45.         String path = ServletActionContext.getServletContext().getRealPath("/");
  46.         System.out.println("path= " + path);
  47.         FileOutputStream fos = null;
  48.         FileInputStream fis = null;
  49.         if(qqfile != null) {
  50.             try {
  51.                 fos = new FileOutputStream(path + "\\" + qqfileFileName);
  52.                 fis = new FileInputStream(getQqfile());
  53.                 byte[] buffer = new byte[1024];
  54.                 int len = 0;
  55.                 while((len = fis.read(buffer)) > 0) {
  56.                     fos.write(buffer, 0, len);
  57.                 }
  58.             } catch (FileNotFoundException e) {
  59.                 e.printStackTrace();
  60.             } catch (IOException e) {
  61.                 e.printStackTrace();
  62.             } finally {
  63.                 try {
  64.                     if(fis != null) {
  65.                         fis.close();
  66.                     }
  67.                     if(fos != null) {
  68.                         fos.close();
  69.                     }
  70.                 } catch (IOException e) {
  71.                     e.printStackTrace();
  72.                 }
  73.             }
  74.  
  75.             try {
  76.                 PrintWriter writer = response.getWriter();
  77.                 writer.write("{\"success\": \"ok\"}");    //这里注意返回的内容必须是json的格式
  78.                 writer.flush();
  79.                 writer.close();
  80.             } catch (IOException e) {
  81.                 e.printStackTrace();
  82.             }
  83.         }
  84.     }
  85. }

这里的两个注意点是：1）上传文件的名字默认是qqfile，且我没找到自行配置名字的选项。如果有知道的请告诉小弟哈。

　　　　　　　　　　2）ajax返回的内容必须是json的格式

3. 参考资料

1)乱世经典   注意他的版本貌似有点旧了，但是讲的很详细

Fine Uploader 简单配置方法的更多相关文章

  1. Nginx负载均衡配置简单配置方法

    http://www.jb51.net/article/121235.htm Nginx作为负载均衡服务器,用户请求先到达nginx,再由nginx根据负载配置将请求转发至不同的Web服务器.下面通过 ...

  2. eclipse中创建NDK和JNI开发环境最简单配置方法

    一.使用环境 1.windows64位操作系统 2.ADT为adt-bundle-windows-x86_64-20130917 3.NDK为android-ndk-r9b 二.配置生成头文件.h ⒈ ...

  3. Quartz.Net的使用（简单配置方法）定时任务框架

    Quartz.dll 安装nuget在线获取dll包管理器,从中获取最新版 Quartz.Net是一个定时任务框架,可以实现异常灵活的定时任务,开发人员只要编写少量的代码就可以实现“每隔1小时执行”. ...

  4. FreeBSD简单配置SSH并用root远程登陆方法

    FreeBSD简单配置SSH并用root远程登陆方法 前言:最近下载了FreeBSD,在虚拟机上安装,第一步先要开启SSH服务,用终端putty软件可以实现在windows系统进行远程管理, 初级 = ...

  5. 带二级目录的Nginx配置------目前找到的最简单的方法

    由于项目不知一个,所以不得不为每一个项目建一个专有的文件夹,这就导致了在配置nginx的时候会出现二级目录 目前找到的最简单的方法     - step1:修改 vue.config.js   添加配 ...

  6. 简单读读源码 - dubbo多提供者(provider)配置方法

    简单读读源码 - dubbo多提供者(provider)配置方法 消费者端dubbo的yml配置 dubbo: consumer: timeout: 300000 protocol: name: du ...

  7. windows下MySQL 5.7+ 解压缩版安装配置方法（转，写的很简单精辟 赞）

    方法来自伟大的互联网. 1.去官网下载.zip格式的MySQL Server的压缩包,根据需要选择x86或x64版.注意:下载是需要注册账户并登录的. 2.解压缩至你想要的位置. 3.复制解压目录下m ...

  8. Fine Uploader文件上传组件

    最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要 ...

  9. thinkjs与Fine Uploader的邂逅

        最近在做一个内部系统,需要一个无刷新的上传功能,找了许久,发现了一个好用的上传工具-Fine Uploader,网上也有不少关于它的介绍,对我有不少的启发,结合我的使用场景简单的介绍一下它与t ...

随机推荐

  1. Python修炼10------面向对象

    面向对象-----类 类:类是一种数据结构,就好比一个模型,该模型用来表述一类事物(事物即数据和动作的结合体),用它来生产真实的物体(实例). 对象:什么叫对象:睁开眼,你看到的一切的事物都是一个个的 ...

  2. 编写简单的爬虫从流行的Scrapy 框架讲起

    到目前为止,我们已经完成了向站点添加搜索和过滤的功能,并且我们已经可以向站点添加一些分类和产品信息.下面我们将考虑当尝试删除实体信息时会发生什么事情. 首先,向站点添加一个名为Test的新分类,然后再 ...

  3. easyui datagrid 的排序问题

    今日遇到一个datagrid排序问题,sortable,sorter函数都已设置,但是始终没有效果,无法在界面自定义排序.后来发现,需要设置remoteSort:false. 切记!!! remote ...

  4. jquery validate扩展验证方法

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  5. KMP详解之二

    KMP算法详解 如果机房马上要关门了,或者你急着要和MM约会,请直接跳到第六个自然段. 我们这里说的KMP不是拿来放电影的(虽然我很喜欢这个软件),而是一种算法.KMP算法是拿来处理字符串匹配的.换句 ...

  6. 在ashx处理程序中，如果返回json串数据？

    可以通过一下代码: using System.Collections.Generic;using System.Web.Script.Serialization; SortedDictionary&l ...

  7. assign retain copy

    举个例子: NSString *houseOfMM = [[NSString alloc] initWithString:'装梵几的三室两厅']; 上面一段代码会执行以下两个动作:  1 在堆上分配一 ...

  8. hdu_5968_异或密码(预处理+二分)

    题目链接:hdu_5968_异或密码 题意: 中午,不解释 题解: 前缀处理一下异或值,然后上个二分查找就行了,注意是unsigned long long #include<bits/stdc+ ...

  9. hdu_5874_Friends and Enemies(公式题)

    题目链接:hdu_5874_Friends and Enemies 题意: 有nn个人, mm种颜色的石头, 人两两之间要么是朋友, 要么是敌人. 每个人可以携带若干种石头或者不带, 要求朋友之间至少 ...

  10. AR9531的mac地址

    root@OpenWrt:/# ifconfigbr-lan    Link encap:Ethernet  HWaddr 00:11:22:34:56:78            inet addr ...