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 代码

js 代码

})
//上传一张主图片
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 = "<div class='tx-c'><img src='" + src + "' /></div>";
   //弹出层
   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('<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);
   }
}

//点击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 单图片上传多图片批量上传相关推荐

ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程
需要用上插件:axupimgs 插件作者:莫若卿支持版本:5.0.4+ 支持语言:仅中文插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
Android 图片批量上传,移动端图片批量上传问题
一.操作系统 1.ios ios的操作系统: 实现图片批量上传,可以直接使用input type=file 加上multiple 就可以实现,至于有些图片显示有问题可以通过 new FileRead ...
分享一个图片管理程序,图片批量上传,图片管理(有图片)
呵呵,好久没写博客了.今天在此奉上一篇! 关于图片管理,其实做项目很多地方都用到图片管理. 比如:产品图片,新闻图片,作品图片. 现分享一篇关于图片管理的文章,希望大家能用得上. 先来看效果图吧: 上 ...
php图片批量上传插件下载,jQuery的多图片批量上传插件
jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码上传前 ...
webuploader多图片 php,php+WebUploader图片批量上传
一.webuploader webuploader主要用来做文件的上传,支持批量上传和图片预览,图片预览是将图片生成base64数据直接在标签中使用,所以能够达到的效果是未真正上传图片可以先看到上传 ...
车型库项目图片批量上传功能
自09年5月份进入公司,已近两年.之前一直在忙于项目上的开发,没时间整理.从今日起,把做过的项目整理一遍,归纳成档,以便查阅. 公司技术部差不多十来个人,但分工明确.技术部别分为了两个开发小组.我主要 ...
JCK Editor 结合jQuery Upload File 增加图片批量上传功能
项目需准备文件: jQuery File Upload 上传插件,下载地址:https://github.com/JennerZhang/jQuery-File-Upload Joomla JFUpl ...
php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...

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

layui 单图片上传多图片批量上传相关推荐

最新文章

热门文章

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

layui 单图片上传 多图片批量上传相关推荐

最新文章

热门文章

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

layui 单图片上传多图片批量上传相关推荐