fileuploader.js 插件使用帮助

最新推荐文章于 2018-07-06 17:13:41 发布

rgbaflf

最新推荐文章于 2018-07-06 17:13:41 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/rgbaflf/article/details/51505077

版权

这个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”);

rgbaflf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fileuploader.js 插件使用帮助

html 代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>fileuploader.js 帮助文档</title><script src="http://yiwugouimg.oss-cn-hangzhou.aliyuncs.co
复制链接

扫一扫