layui 单图片上传 多图片批量上传

css样式 

.defaultDots1{
                display: inline-block;
                min-width: 14px;
                height: 16px;
                padding: 0 5px;
                line-height: 16px;
                font-size: 12px;
                background: #F5222D;
                border-radius: 8px;
                color: #FFFFFF;
                text-align: center;
            }

html 代码

                            

主图片：

                            

                                

                                    
                                    上传
                                    
                                        
                                        x 
                                    
                                

                            

                            

批量图片：

                            

                                

                                    
                                    上传
                                

                            

                        

js  代码

var imgs = "";
var type = "${param.type==null?map.type:param.type}";
$(function(){
    var img="${map.img}";  //修改 查询出来的 主图片
    imgs="${map.imgs}"; 修改 查询出来的 批量图片
    //$("#uploadHead").attr("src","<%=basePath%>"+icons);
    if($.funcUtils.isNotEmpty(img))
        showImgs(img,"main");
    if($.funcUtils.isNotEmpty(imgs))
    $.each(imgs.split(","),function(i,src){
        if(i             showImgs(src,"other");
    })

})
//上传一张主图片
layui.use(['upload', 'element'], function() {
    var upload = layui.upload,
    element = layui.element; //上传
    upload.render({
        elem: '#headImg',
        url: '<%=basePath%>/uploadingFile/uploadFile.html?folderName=UserPicture', //UserPicture上传到本地磁盘resin4.0文件夹 
        field:'Filedata',
        xhr: xhrOnProgress,
        accept: "images", //普通文件
        exts: 'jpg|png|jpeg|gif',//设置可上传文件
        multiple: false, //多文件上传
        done: function(res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
            showImgs(res.fileInfo,"main");
        },Choose:function(obj){

              Obj.preview(function(index, file, result){

                Console.log(index);//得到文件索引

                Console.log(file);//得到文件对象

              Console.log(file.name)//得到上传文件名称

               Console.log(file.size)//得到上传文件大小size

            })

        }

    });
});
function previewImg(_this) { //预览主图片
    var src = $(_this).attr("src");// style='max-height:600px;max-width:100%;'
    var imgHtml = "

"; 
    //弹出层 
    windowTop.$sys.layer.open({ 
        maxmin: true,
        type: 1, 
        shade: 0.8,
        offset: 'auto', 
        area: ['500px','400px'],
        closeBtn:1,
        skin:'layui-layer-nobg',
        shadeClose:true,//点击外围关闭弹窗 
        scrollbar: false,//不现实滚动条 
        title: "图片预览", //不显示标题  
        content: imgHtml //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
    });
}

//批量多张图片上传
layui.use(['upload', 'element'], function() {
    var upload = layui.upload,
    element = layui.element; //上传
    upload.render({
        elem: '#headImgs',
        url: '<%=basePath%>/uploadingFile/uploadFile.html?folderName=UserPicture',
        field:'Filedata',
        xhr: xhrOnProgress,
        accept: "images", //普通文件
        exts: 'jpg|png|jpeg|gif',//设置可上传文件
        multiple: true, //多文件上传
        size:10240,//图片大小
        number:30,//上传的数量
        bindAction: '#test9',
        before: function(obj) {
            /* //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                $('#demo').append('');
            }); */
        },
        done: function(res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
            //每个图片上传结束的回调，成功的话，就把新图片的名字保存起来，作为数据提交
            if(res.code!="1"){
                imgs=imgs+res.fileInfo+",";
                showImgs(res.fileInfo,"other");
            }
        }
    });
});
//显示图片
function showImgs(src,type){
    if(type=="main"){
        $("#img").val(src);
        $("#iconspan").removeClass("hide");
        $("#iconspan img").attr("src",src);
    }else{
        var $icons = $("#iconspan").clone();
        $icons.removeClass("hide");
        $icons.attr("id","");
        $icons.find("img").attr("src",src);
        $(".imagesdiv").append($icons);
    }
}

//点击X删除图片
function removeImage(_this){
    var pid = $(_this).parent().attr("id");
    if(pid=="iconspan"){
        $(_this).parent().addClass("hide");
        $("#img").val("");
        $("#iconspan img").attr("src","");
    }
    else{
        var src = $(_this).prev().attr("src")+",";
        imgs = imgs.replace(src, "");
        $(_this).parent().remove();
    }
}

 

java 图片上传到本地磁盘 resin4.0文件里面    返回图片路径到 input框img    在通过添加方法到数据库就可以了

java后台

    /***
     * 个人文件上传
     * 
     * @param Filedata
     * @param request
     */
    @RequestMapping("uploadFile")
    @ResponseBody
    public synchronized Object uploadFile(@RequestParam("Filedata") MultipartFile Filedata, HttpServletRequest request,HttpServletResponse response) {
        response.addHeader("Content-Type", "text/html;charset=UTF-8");
        String folderName=request.getParameter("folderName");//文件夹名字
        String compress=request.getParameter("compress");//是否压缩图片
        // 上传图片信息
        Map uploadInfo = new HashMap();
        // 菜单栏目图标保存路径
        String path="";
        String iconPath =request.getSession().getServletContext().getRealPath("/Attachment");
        // 判断文件是否为空
        if (!Filedata.isEmpty()) {
            try {
                FileUploadUtil.uploadFileRandomFileName(Filedata, iconPath,folderName);
                // 返回保存文件信息
                path=FileUploadUtil.fileName;
                uploadInfo.put("fileInfo", File.separator+"Attachment"+File.separator+folderName+File.separator+path);
                
                if(compress!=null&&"true".equals(compress)){
                    //压缩图片
                    String filepath = iconPath+File.separator+folderName+File.separator+path;
                    FileUploadUtil.zipWidthHeightImageFile(filepath,filepath,30,40,10f);
                }
                
            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return uploadInfo;
    }