由于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. How to use php serialize() and unserialize()

    A PHP array or object or other complex data structure cannot be transported or stored or otherwise u ...

  2. java练习 - 字符串反转

    思路: 1. 首先将字符串转换成数组,一个数组元素放一个字符. 2. 循环遍历字符串,将所有字符串前后字符调换位置,比如:第一个和最后一个调换,第二个和倒数第三调换,第三个和倒数第三调换,直到所有字符 ...

  3. StackExchange.Redis 基本使用 （一） （转）

    StackExchange.Redis下载地址: https://github.com/StackExchange/StackExchange.Redis/blob/master/Docs/Basic ...

  4. My97DatePicker -- 一个功能丰富， 而且兼容 ie 6, 7的日期选择组件

    easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

  5. HTML5入门总结 HTML5API

    w3cshools  MDN英文  MDN中文 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The t ...

  6. dom4j操作xml文档

    java Dom4j解析XML文件 标签(空格分隔):java进阶 xml文档: <?xml version="1.0" encoding="UTF-8" ...

  7. BuildingAndRunningUAFServerUsingMaven

    https://github.com/eBay/UAF/wiki/BuildingAndRunningUAFServerUsingMaven(CLIonly) 实现uaf的demo,使用ebay的方案 ...

  8. mybatis拦截器分页

    package com.test.interceptor; import java.sql.Connection; import java.sql.ResultSet; import java.sql ...

  9. Xcode-之CocoaPads

    一.说明 CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们可以为项目添加被称为“Pods”的依赖库(这些类库必须是CocoaPods本身所支持的),并且可以 ...

  10. L3-003. 社交集群

    L3-003. 社交集群 题目链接:https://www.patest.cn/contests/gplt/L3-003 查并集 与L2-007(家庭房产)类似,都是采用了并查集的算法,相对来说这题处 ...