Fine Uploader 简单配置方法
由于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 简单配置方法的更多相关文章
- Nginx负载均衡配置简单配置方法
http://www.jb51.net/article/121235.htm Nginx作为负载均衡服务器,用户请求先到达nginx,再由nginx根据负载配置将请求转发至不同的Web服务器.下面通过 ...
- eclipse中创建NDK和JNI开发环境最简单配置方法
一.使用环境 1.windows64位操作系统 2.ADT为adt-bundle-windows-x86_64-20130917 3.NDK为android-ndk-r9b 二.配置生成头文件.h ⒈ ...
- Quartz.Net的使用（简单配置方法）定时任务框架
Quartz.dll 安装nuget在线获取dll包管理器,从中获取最新版 Quartz.Net是一个定时任务框架,可以实现异常灵活的定时任务,开发人员只要编写少量的代码就可以实现“每隔1小时执行”. ...
- FreeBSD简单配置SSH并用root远程登陆方法
FreeBSD简单配置SSH并用root远程登陆方法 前言:最近下载了FreeBSD,在虚拟机上安装,第一步先要开启SSH服务,用终端putty软件可以实现在windows系统进行远程管理, 初级 = ...
- 带二级目录的Nginx配置------目前找到的最简单的方法
由于项目不知一个,所以不得不为每一个项目建一个专有的文件夹,这就导致了在配置nginx的时候会出现二级目录 目前找到的最简单的方法 - step1:修改 vue.config.js 添加配 ...
- 简单读读源码 - dubbo多提供者(provider)配置方法
简单读读源码 - dubbo多提供者(provider)配置方法 消费者端dubbo的yml配置 dubbo: consumer: timeout: 300000 protocol: name: du ...
- windows下MySQL 5.7+ 解压缩版安装配置方法（转，写的很简单精辟 赞）
方法来自伟大的互联网. 1.去官网下载.zip格式的MySQL Server的压缩包,根据需要选择x86或x64版.注意:下载是需要注册账户并登录的. 2.解压缩至你想要的位置. 3.复制解压目录下m ...
- Fine Uploader文件上传组件
最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要 ...
- thinkjs与Fine Uploader的邂逅
最近在做一个内部系统,需要一个无刷新的上传功能,找了许久,发现了一个好用的上传工具-Fine Uploader,网上也有不少关于它的介绍,对我有不少的启发,结合我的使用场景简单的介绍一下它与t ...
随机推荐
- Location-aware Associated Data Placement for Geo-distributed Data-intensive Applications--INFOCOM 2015
[标题] [作者] [来源] [对本文评价] [why] 存在的问题 [how] [不足] assumption future work [相关方法或论文] [重点提示] [其它]
- 显示ubuntu 10.4右上角网络图标
在面板右击“添加到面板”,选择“通知区域”
- 嗅探js css 文件是否加载成功示例
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 第13天 JSTL标签、MVC设计模式、BeanUtils工具类
第13天 JSTL标签.MVC设计模式.BeanUtils工具类 目录 1. JSTL的核心标签库使用必须会使用 1 1.1. c:if标签 1 1.2. c:choos ...
- 创建简单的MVC项目
一,新建一个空的MVC项目 二,连接数据库,添加一个实体模型Model.edmx
- html5权威指南：定制input元素
第十三章:定制Inpur元素,http://www.cnblogs.com/polk6/p/5417921.html#Menu3-New input标签最全面的type属性:http://blog.s ...
- jQuery第三章
一.jQuery中的DOM操作 一般来说,DOM操作分为3个方面,即DOM Core核心.HTML-DOM和CSS-DOM 1.DOM Core JavaScript中的getElementById( ...
- POJ 2348 Euclid's Game（简单博弈）
这道题没说a b最大多少,所以要声明为long long型,不然会WA! 道理很简单,(默认a>=b)a和b只有以下三种关系: 1.a%b==0 :这种关系下,可能是a/b为整数,也可能是a和b ...
- hive UDF添加方式
hive UDF添加的方式 1.添加临时函数,只能在此会话中生效,退出hive自动失效 hive> add jar /home/jtdata/hiveUDF/out0.jar; Added [/ ...
- poj1256（全排列stl）
#include<stdio.h>#include<string.h>#include<algorithm>using namespace std;bool cmp ...