fileuploader.js 插件使用帮助
长孙弘壮
这个js是在原先的js上修改过的 增加一些功能 如低浏览器报错的功能
实现上传功能 上传图片按钮的样式可以自己调整
fileuploader.html 代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>fileuploader.js 帮助文档</title>
<!-- 引用js -->
<script src="http://yiwugouimg.oss-cn-hangzhou.aliyuncs.com/xyz/fileuploader_xyz_1.0.js"></script>
<!-- 引用jquery 非必需 建议都加上 方便回调后操作dom -->
<script src="jquery.js"></script>
<style>
</style>
</head>
<body>
<div id="uploader-sim" title="点击上传单张图片" style="height: 20px; width: 50px; background: blue;"></div>
<img id="img-sim" src="" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="uploader-mul" title="点击上传多张图片" style="height: 20px; width: 50px; background: red;"></div>
<img id="img-mul-1" src="" />
<img id="img-mul-2" src="" />
<img id="img-mul-3" src="" />
</body>
<script>
//单个图片上传
(function() {
var id = "uploader-sim"; //element id element可以为任何元素 但最好为 div span等
var baseUrl = "http://localhost:8080/cbe-web/";//项目的url路径 一定要用全称(既加上http://的url路径 和本页面要同域名) 发布到正式环境上 记得改回正式的url地址
var callurl = baseUrl + "upload_callback_id.html"; //upload_callback_id.html 对应你自己写的action中的访问地址
new qq.FileUploader({
element : document.getElementById(id), //必须
action : 'http://oploader_host/upload/mulImgUpload',//必须 适合多张图片上传url 也可以上传单张图片
params : {
id : id,//非必需 当一个页面有多个上传控件的时候 用来区分是哪个控件上传的 建议都加上
//project : "cbe-web", //非必需 项目标识 不要包含特殊符号 如果加上 则上传的图片会传到这个文件夹下 如 /i004/cbe-web/2016/05/26/76/fac9b46d64a690b28e14140d218fa12e.jpg
callurl : callurl //必须
},
fileLimit : 1, //非必需 一次上传图片个数 默认值为10
sizeLimit : 1024 * 1024 * 5,//5M 非必需 上传图片大小 默认1024*1024*2
allowedExtensions : [ "jpg", "jpeg", "png", "gif" ],//非必需 支持图片文件的类型 默认不做验证
multiple : false, //是否可以支持多张图片上传 默认值为 true
onSubmit : function(id, fileName) {
// 非必需 点击上传后需要执行的方法 比如说 增加蒙层 防止多次点击 增加伪进度条等
//$("body").append('<div class="div-overlay"></div>');
}
});
})();
//多个图片上传
(function() {
new qq.FileUploader({
element : document.getElementById("uploader-mul"),
action : 'http://uploader_host/upload/mulImgUpload',
params : {
id : "uploader-mul",
//project : "cbe-web",
callurl : "http://localhost:8080/cbe-web/upload_callback_id.html"
},
fileLimit : 3
});
})();
/**
* 对应callurl中页面中 parent.upload_callback_id(${obj} , '${id}'); 中的方法名
* 这个方法必须写在最外面 不能写在 $(function(){ });
*/
function upload_callback_id(obj, id) {
//如果上面没有传id 则这里的id为"null" 也可以不做判断 因为没有id就代表这个页面只有一个上传图片控件
if (id == "uploader-sim") {
//代表是 id为 uploader-sim 上传图片的回调方法
$("#img-sim").attr("src", obj.pic1);
} else if (id == "uploader-mul") {
//代表是 id为 uploader-mul 上传图片的回调方法
$("#img-mul-1").attr("src", obj.pic1);
$("#img-mul-2").attr("src", obj.pic2);
$("#img-mul-3").attr("src", obj.pic3);
}
console.info(obj);
console.info(id);
}
</script>
</html>
java 代码
@Controller
public class UploaderAction {
@RequestMapping("/upload_callback_id")
public ModelAndView upload_callback_id(HttpServletRequest request) {
ModelAndView mv = new ModelAndView("/web/upload_callback_id");
String obj = request.getParameter("obj");
String id = request.getParameter("id");
mv.addObject("obj", obj);
mv.addObject("id", id);
return mv;
}
}upload_callback_id.jsp 代码
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript">
parent.upload_callback_id(${obj}, "${id}");
//这个parent指的就是 demo.html
// upload_callback_id 方法要和 demo.html 中的 function upload_callback_id（）{} 对应
</script>———————————-我是分割线———————————————————————-
http://uploader_host/upload/mulImgUpload
这个servlet不支持加水印 如果是产品上传里面需要加水印 请用原先的servlet
http://uploader_host/upload/multiUploadServlet
callurl里面则要改成 id跟在callurl后面
var callurl = baseUrl + “upload_callback_id.html?id=” + id + “&”;
java代码中
String obj = request.getParameter(“obj”);
改成
String obj = request.getParameter(“?obj”);
类似资料：