fileuploader.js 插件使用帮助

这个js是在原先的js上修改过的 增加一些功能 如低浏览器报错的功能
实现上传功能 上传图片按钮的样式可以自己调整

fileuploader.html 代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<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.com/xyz/fileuploader_xyz_1.0.js">script>


<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('
');
} }); })(); //多个图片上传 (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"%>

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

你可能感兴趣的:(fileuploader.js 插件使用帮助)