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

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

项目地址：Fine Uploader

1.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ page language="java" import="java.util.*"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Fine Uploader Demo</title>

    <link href="./plugins/jquery.fineuploader-3.7.1/fineuploader-3.7.1.min.css" rel="stylesheet"> <!-- 样式 -->

  </head>

  <body>

    <div id="jquery-wrapped-fine-uploader"></div>

    <div id="triggerUpload">上传</div>

     <script type="text/javascript" src="./plugins/jquery/jquery-1.7.min.js"></script> <!-- jquery -->

    <script src="./plugins/jquery.fineuploader-3.7.1/jquery.fineuploader-3.7.1.min.js"></script> <!-- Fine Uploader -->

    <script>

    $(document).ready(function () {

        $('#jquery-wrapped-fine-uploader').fineUploader({

          request: {

            endpoint: 'fineUpload.action'                           //处理文件上传的action

          },

          text: {

              uploadButton: '选择上传文件'                            //上传按钮的文字

          },

          multiple: false,                                           //是否为多文件上传

          validation: {

              allowedExtensions: ['apk', 'rar', 'zip',], //限制上传格式

              sizeLimit: 1024* 1024* 1024 * 1024 * 1024              //限制上传大小

          },

          autoUpload: false,                                         //是否自动提交

          editFilename: {                                            //编辑名字

              enable: true

          }

        }).on({                                                       //注册监听事件

            "complete": function(event, id, fileName, responseJSON) { //完成

                if(responseJSON.success) {

                    alert(responseJSON.success);

                }

            },

            "cancel": function(event, id,fileName){                   //取消

                alert(fileName);

            },
　　　　　　　"submit": function(event, id, fileName) {                 //选择文件后
　　　　　　　　　alert('文件选择');
　　　　　　　}

            "error": function(event, id, fileName, reason) {          //出错,这里还有些其他事件，我暂时不用就没实践，大家可以自己去看api

                alert(reason);

            }

        });

      });

       $("#triggerUpload").click(function() {                         //手动提交

           $('#jquery-wrapped-fine-uploader').fineUploader('uploadStoredFiles');

       });

    </script>

  </body>

</html>

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

2. struts2的action:

package cn.zyc.action;

import java.io.File;

import java.io.FileInputStream;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import org.apache.struts2.convention.annotation.Action;

import cn.zyc.util.ActionUtil;

import com.opensymphony.xwork2.ActionSupport;

public class FineUploadTest extends ActionSupport{

    private File qqfile;             //上传文件的name,默认就是这个

    private String qqfileFileName;   //上传文件名

    HttpServletResponse response = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);

    HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);

    public File getQqfile() {

        return qqfile;

    }

    public void setQqfile(File qqfile) {

        this.qqfile = qqfile;

    }

    public String getQqfileFileName() {

        return qqfileFileName;

    }

    public void setQqfileFileName(String qqfileFileName) {

        this.qqfileFileName = qqfileFileName;

    }

    @Action(value="fineUpload")

    public void fineUpload(){

        String path = ServletActionContext.getServletContext().getRealPath("/");

        System.out.println("path= " + path);

        FileOutputStream fos = null;

        FileInputStream fis = null;

        if(qqfile != null) {

            try {

                fos = new FileOutputStream(path + "\\" + qqfileFileName);

                fis = new FileInputStream(getQqfile());

                byte[] buffer = new byte[1024];

                int len = 0;

                while((len = fis.read(buffer)) > 0) {

                    fos.write(buffer, 0, len);

                }

            } catch (FileNotFoundException e) {

                e.printStackTrace();

            } catch (IOException e) {

                e.printStackTrace();

            } finally {

                try {

                    if(fis != null) {

                        fis.close();

                    }

                    if(fos != null) {

                        fos.close();

                    }

                } catch (IOException e) {

                    e.printStackTrace();

                }

            }

            try {

                PrintWriter writer = response.getWriter();

                writer.write("{\"success\": \"ok\"}");    //这里注意返回的内容必须是json的格式

                writer.flush();

                writer.close();

            } catch (IOException e) {

                e.printStackTrace();

            }

        }

    }

}

这里的两个注意点是：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. SSLPinning 延伸

    AFSecurityPolicy用于验证HTTPS请求的证书,先来看看HTTPS的原理和证书相关的几个问题. HTTPS HTTPS连接建立过程大致是,客户端和服务端建立一个连接,服务端返回一个证书, ...

  2. pdf 电子书分享

    http://yunpan.cn/cLgXntGmIas7A 访问密码 7d04 来自为知笔记(Wiz)

  3. Mac MySQLdb模块安装，可算解决了

    转载:http://blog.csdn.net/janronehoo/article/details/25207825 短评:这篇文章感觉是比较全面解决Mac MySQLdb模块安装问题的文章了,特别 ...

  4. linux安装包资源库

    最近发现了一个很不错的linux的rpm资源库,可以在里面找到rpm安装过程中缺失的资源! 网址:http://pkgs.org/

  5. count 数字计数（bzoj 1833）

    Description 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. Input 输入文件中仅包含一行两个整数a.b,含义如上所述. Output 输出文 ...

  6. cursor:pointer 什么意思?

    cursor规则是设定网页浏览时用户鼠标指针的样式,也就是鼠标的图形形状cursor:pointer设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式另外可以选 ...

  7. ajax成功案例

    $.ajax({ type:"post", url:"<%=basePath%>getAllVersion", dataType:"jso ...

  8. java 内省

    用内省来操作Bean会给程序带来很大的便利,特别是在很大的实体对象的时候,在其属性很多的时候要为其赋值的时候, package com.bean; public class User { privat ...

  9. #if defined和#if !defined(c语言的宏定义)

    我们要检查a是否定义 #if defined a #undef a #define a 200 #endif 上述语句检验a是否被定义,如果被定义,则用#undef语句解除定义,并重新定义a为200 ...

  10. Openjudge-计算概论（A）-找和为K的两个元素

    描述: 在一个长度为n(n < 1000)的整数序列中,判断是否存在某两个元素之和为k. 输入第一行输入序列的长度n和k,用空格分开.第二行输入序列中的n个整数,用空格分开.输出如果存在某两个元 ...