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 ...
随机推荐
- javascript 私有方法的实现
原文地址: http://frugalcoder.us/post/2010/02/11/js-classes.aspx Classy JavaScript - Best Practices 11. F ...
- wso2 CEP集成storm实验
1.三台机子:192.168.225.1(manager,nimbus), 192.168.225.2(worker,supervisor), 192.168.225.3(worker,supervi ...
- vue 相对其他热门 框架 优点 --- 待续
react vs vue 1. 处理动画 vue 更有优势 , 这是由于 React 有大量的检查机制 2.性能更高, 在React中,你需要在每个地方去实现 shouldComponentUpda ...
- Python第一天课程
1.在linux下写python脚本,开头的解释器宣告的写法应该是#!/usr/bin/env python 定义变量name="XXX" age=21 所有使用引号引起的内 ...
- unity3d 学习过程记录
通过泰克在线,开始学习视频教程 1.学习 Unity3d零基础教学初级篇:熟悉一下unity编辑器结构和控件以及对控件的基本操作 2.学习Roll-a-ball小项目开发:通过练习制作小游戏,巩固所学 ...
- linux下安装php的oracle拓展
最近要用Php远程连接第三方的oracle数据库,安装oracle拓展搞了好久,终于弄出来了,现在分享出来: 1,注意安装的客户端版本要和服务端的版本一致,不然会有异常 2,安装之前先要下载三个软件: ...
- selenium webdriver学习-怎么等待页面元素加载完成
http://blog.csdn.net/aerchi/article/details/8055913 WebDriverWait类和ExpectedCondition
- emoji图像转码解码 存入数据库
public String emojiConvert1(String str) throws UnsupportedEncodingException { String patternString = ...
- React - Stores
Event emmiters that make data available, handle business logic, send events to React, and listen for ...
- Activity的四中启动模式的应用场景。
1,standard 默认情况下的启动模式,队列排序,linked 2,singleTop ,任务栈栈顶只有一个实例.如果Activity A在栈顶,就不会在A 的上面创建新的 Activity A ...