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

html 代码

js 代码

//批量多张图片上传
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('<img src="' + result
                   + '" alt="' + file.name
                   +'"height="92px" width="92px" class="layui-upload-img uploadImgPreView">');
           }); */
       },
       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);
   }
}
var editor = null;
function editorInit(){//ck插件
   editor =CKEDITOR.replace('editor',{height:"100px;",toolbar_Full:"Basic"});
   var html = $("#content").val();
   editor.setData(html);//把数据保存在ck插件里
}
//点击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<String, Object> uploadInfo = new HashMap<String, Object>();
       // 菜单栏目图标保存路径
       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;
   }

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

猜你喜欢

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