由于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. iOS摇一摇功能、震动功能、简单的摇动动画、生成二维码图片与发送短信等几个功能

    有一个开锁的功能,具体的需求就类似于微信的"摇一摇"功能:摇动手机,手机震动,手机上的锁的图片摇动一下,然后发送开锁指令.需求简单,但用到了许多方面的知识. 1.摇一摇 相对这是最 ...

  2. @property (nonatomic, getter = isExpanded) BOOL expanded;

    如果这个property是 BOOL on, 那么Objc默认创建的 setter 为: - (void)on:(BOOL)setOn { } getter 为: - (BOOL)on { retur ...

  3. 完全删除Postgresql

    First: If your install isn't already damaged, you can drop unwanted PostgreSQL servers ("cluste ...

  4. .Net cxy 提高效率

    Visual Studio Visual Studio Productivity Power tool: VS 专业版的效率工具. Web Essentials: 提高开发效率,能够有效的帮助开发人员 ...

  5. Zookeeper实现分布式锁服务（Chubby）

    在分布式系统中,如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源,那么访问这些资源的时候,往往需要互斥来防止彼此干扰,来保证一致性,在这种情况下,便需要使用到分布式锁例如有N台服务器同时 ...

  6. icon的使用

    在前端页面设计时,不免使用的就是图标,下面就我使用图标icon分享一下经验 1.icon插件,现在比较好的是bootstrap自带的,fontawesome,链接地址:http://fontaweso ...

  7. angular2与VS2015 asp.net core集成使用

    首先,需要在VS2015环境下更新到update2,并安装asp.net core环境,并安装Node.js插件. 新建asp.net core项目: 此时,需要先新建npm配置文件,如图: 并定义n ...

  8. L2-001. 紧急救援

    L2-001. 紧急救援 题目链接:https://www.patest.cn/contests/gplt/L2-001 Dijstra 本题是dijstra的拓展,在求最短路的同时,增加了不同的最短 ...

  9. wordpress 删除底部"自豪地采用 WordPress"

    找到footer.php文件,删除以下代码即可: <footer id="colophon" class="site-footer" role=" ...

  10. [BZOJ2339][HNOI2011]卡农

    [BZOJ2339][HNOI2011]卡农 试题描述 输入 见"试题描述" 输出 见"试题描述" 输入示例 见"试题描述" 输出示例 见& ...