由于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. 12C RMAN 备份参考

    12C引进了pdb的概念,使得rman的恢复相对来说复杂了一些,这里对pdb的常规备份和恢复进行了简单测试,供大家参考 1.cdb启动和pdb关系测试 [oracle@xifenfei tmp]$ s ...

  2. MyEclipse中用Maven创建Web项目

    方法/步骤     new --> other   1.Wizards: mvaen 2.Maven Project 3.Next   Use Default Workspace Locatio ...

  3. mysql修改密码Your password does not satisfy the current policy requirements

    出现这个问题的原因是:密码过于简单.刚安装的mysql的密码默认强度是最高的,如果想要设置简单的密码就要修改validate_password_policy的值, validate_password_ ...

  4. 树：BST、AVL、红黑树、B树、B+树

    我们这个专题介绍的动态查找树主要有: 二叉查找树(BST),平衡二叉查找树(AVL),红黑树(RBT),B~/B+树(B-tree).这四种树都具备下面几个优势: (1) 都是动态结构.在删除,插入操 ...

  5. 超链接解决头部fixed问题

    ///////////超链接解决头部fixed问题 $('a[href*=#]').click(function () { var top1 = $(".header").heig ...

  6. UVa 11426

    首先我们了解一下欧拉函数phi[x],phi[x]表示的是不超过x且和x互素的整数个数 phi[x]=n*(1-1/p1)*(1-1/p2)....(1-1/pn); 计算欧拉函数的代码为 int e ...

  7. CentOS7 安装 Mysql 服务

    我希望所有的软件包都用 rpm.yum 安装,这样卸载.升级.管理方便,可是自带的 yum 仓库里面没有 mysql-server 或者不是最新的,我需要安装MySQL官方的 yum 仓库, http ...

  8. CSS3秘笈复习：第六章

    第六章 1.文本大写化: text-transform:uppercase; 另外三种选项是:lowercase或capitalize以及none. 2.文本修饰: text-decoration:u ...

  9. 关于ApkTool不同版本在重新打游戏包时候的区别

    在工作中由于使用到将游戏CP提供的apk包重新反编译,然后二次签名出包,所以遇到了一个奇怪的bug. 下面是CP提供的apk包,将近358M 但是在重新编译之后,包变成了250M左右的apk包,虽然可 ...

  10. linshi_temp_erweima_html

    <!doctype html><html><head><meta charset="utf-8"><meta content= ...