layUI中点击按钮选择图片(不自动上传)，然后点击上传按钮，上传图片(可以上传多个文件)

最新推荐文章于 2024-05-25 22:39:08 发布

qzw_wmh

最新推荐文章于 2024-05-25 22:39:08 发布

阅读量3w

点赞数 6

分类专栏： java layUI JSP 文章标签： LayUI图片上传多文件上传 JSP 不自动上传文件 LayUI

本文链接：https://blog.csdn.net/qzw_wmh/article/details/78856346

版权

java 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

layUI

5 篇文章 0 订阅

订阅专栏

JSP

3 篇文章 0 订阅

订阅专栏

效果图：

1、点击“选择文件”，进行选择将要上传的文件；

2、选择好将要上传的文件，文件名称显示在“选择文件”按钮后面；

3、点击“开始上传”按钮，显示在页面上，图片信息传到后台中，将图片进行保存；

4、还可以上传多个文件。

效果图上完了，就开始代码咯！

//layUI代码

<div class="layui-upload">
	<span style="margin-left: 16px;">单位平面图：   </span>
	<input type="file" name="file" id="s_pmt_dw" style="width:190px">
	<button type="button" class="layui-btn" id="test9">上传</button>
	<div class="layui-upload-list" id="demo2"></div>
</div>

//选完文件后不自动上传（js代码，将文件传到后台）
		  upload.render({
		    elem: '#s_pmt_dw'				//“选择文件”按钮的ID
		    ,url: './rest/population/uploadPortrait'	//后台接收地址
		    ,data: {s_rkbm: '1',type:'S1'}		//传递到后台的数据
		    ,auto: false				//不自动上传设置
	    	    ,accept: 'file'				 //允许上传的文件类型
	  	    ,exts: 'png|jpg|bmp' 			//设置智能上传图片格式文件
	    	    ,size: 5000 				//最大允许上传的文件大小
		    ,multiple: true				//设置是否多个文件上传
		    ,bindAction: '#test9'			//“上传”按钮的ID
		    ,before: function(obj){
			    //预读本地文件示例，不支持ie8
			    obj.preview(function(index, file, result){		//在当前ID为“demo2”的区域显示图片
			      $('#demo2').append('<img name = "s_pmt_dw" style="width: 120px; height: 150px; margin-left: 16px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
			    });
			   }
		    ,done: function(res){
		      console.log(res)
		    }
		  });

这是后台controller层接收图片数据用的

 @RequestMapping(value = "/uploadPortrait", method = RequestMethod.POST)
    public ResponseEntity<?> uploadPortrait(HttpServletRequest request, String s_rkbm,String type, @RequestParam(value = "file")MultipartFile[] files) {
        Response response = new Response();
        try {
            for (int i = 0; i < files.length; i++) {
                UploadUtils uploadUtils = new UploadUtils();		//UploadUtils 就是一个文件上传的工具类，自己写一个就可以了
                String id = UuidUtil.get32UUID();
                //设置目录文件名称
                //其中images,flashs,medias,files,对应文件夹名称,对应dirName
                uploadUtils.setDirName("images");
                //设置文件名称
                uploadUtils.setFileName(id);
                //设置上传文件最大值（byte）
                uploadUtils.setMaxSize(10000000);
               /**
                * 开始上传文件
                * info[0] 验证文件域返回错误信息 info[1] 上传文件错误信息 info[2] savePath info[3] saveUrl info[4] fileUrl
                */
                String[] info = uploadUtils.uploadFile(files[i], request);
                if("true".equals(info[0]) && "true".equals(info[1])){
                    NbdwInfoTp nbdwInfoTp = new NbdwInfoTp();
                    nbdwInfoTp.setS_id(id);
                    nbdwInfoTp.setS_sydw_dwbm(s_rkbm);
                    nbdwInfoTp.setS_xplx(files[i].getContentType());
                    nbdwInfoTp.setS_xpwjmc(info[4]);
                    nbdwInfoTp.setS_xxdjly_zaglywlbdm(type);
                    System.out.println(nbdwInfoTp.toString());
                    int ret = 0;
                    //int ret = populationService.savePopulationRx(actualPopInRx);
                    if(ret == 0){
                        response.setState(EnumStatus.SUCCESS);
                        response.setMessage("文件上传成功 ");
                    }
                }else{
                    response.setState(EnumStatus.FAIL);
                    response.setMessage("文件上传成功 ");
                }
                
            }
        } catch (Exception e) {
            response.setState(EnumStatus.FAIL);
            response.setMessage("文件上传成功 ");
        }
        return backResponse(response);
    }

工具类

public class Base64UploadUtils {
	//本地磁盘路径
	private String path = ConfigManager.getInstance().getConfigItem("Base64Upload_root", "");
	//图片最大大小(byte)
	private long maxSize = 1000000;
	//文件后缀
	private String suffix = "";  
	//文件上传相对路径
	private String basePath = "uploadFiles";
	// 文件最终的url包括文件名
	private String fileUrl;
	// 若不指定则文件名默认为 yyyyMMddHHmmss_xyz
	private String fileName;
	// 文件保存目录路径
	private String savePath;
	// 文件保存目录url
	private String saveUrl;
	// 文件实际大小 KB
	private long fileSize;
	// 解码后的base64
	private byte[] by;
	
	public Base64UploadUtils(){
		
	}
	
	/**
	 * 文件上传
	 * @param base64Data base64编码
	 * @param path 上传路径
	 * @return infos[0] 文件后缀 infos[1]验证大小 infos[2]保存信息 infos[3]文件大小 infos[4]文件路径
	 */
	public String[] uploadFile(String base64Data){
		String[] infos = new String[5];
		if (Tools.isEmpty(base64Data)) {
			infos[0] = "图片数据不能为空";
		}else {
			infos[0] = this.validateFormt(base64Data);
			infos[1] = this.validateSize(base64Data);
			if (Tools.notEmpty(infos[0]) && Tools.isEmpty(infos[1]) && Tools.notEmpty(path)) {
				infos[2] = this.SaveImage();
				infos[3] = (fileSize/1024 + "kb").toString();
				infos[4] = "/"+ConfigManager.getInstance().getConfigItem("Base64Upload_path", "")+fileUrl.split(path)[1]; //fileUrl.substring(fileUrl.indexOf("/")+1, fileUrl.length());
			}
		}
		return infos;
	}
	
	/**
	 * 验证格式
	 * @param base64Data
	 * @return
	 */
	public String validateFormt(String base64Data){
		if("data:image/jpeg;".equalsIgnoreCase(base64Data.substring(0, base64Data.indexOf(";")+1))){//data:image/jpeg;base64,base64编码的jpeg图片数据  
            suffix = "jpg";  
        } else if("data:image/bmp;".equalsIgnoreCase(base64Data.substring(0, base64Data.indexOf(";")+1))){//data:image/bmp;base64,base64编码的bmp图片数据
            suffix = "bmp";
        } else if("data:image/png;".equalsIgnoreCase(base64Data.substring(0, base64Data.indexOf(";")+1))){//data:image/png;base64,base64编码的png图片数据
            suffix = "png";
        }else{  
        	suffix = "";
        }    
		return suffix;
	}
	
	/**
	 * 验证大小并初始化目录
	 * @param base64Data
	 * @return
	 */
	public String validateSize(String base64Data){
		String error = "";
		//截取base64编码前缀
		base64Data = base64Data.substring(base64Data.indexOf("-")+1, base64Data.length());
		by = Base64Utils.decodeFromString(base64Data);
		fileSize = by.length;
		if (fileSize>maxSize) {
			error = "上传文件大小超过限制";
		}else {
			//创建文件夹
			savePath = path + "/"+basePath;
			saveUrl = path + "/"+basePath;
			File saveDirFile = new File(savePath);
			if (!saveDirFile.exists()) {
				saveDirFile.mkdirs();
			}
			SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
			String ymd = sdf.format(new Date());
			savePath += "/"+ymd;
			saveUrl +="/"+ymd;
			File dirFile = new File(savePath);
			if (!dirFile.exists()) {
				dirFile.mkdirs();
			}
		}
		return error;
	}
	
	/**
	 * 保存图片
	 * @param base64Data
	 * @return
	 */
	public String SaveImage(){
		String error = "";
		String newFileName;
		if (Tools.notEmpty(fileName)) {
			newFileName = fileName + "."+suffix;
		}else {
			SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
            newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + suffix;
		}
		fileUrl = saveUrl +"/"+ newFileName;
		try {
			FileUtils.writeByteArrayToFile(new File(fileUrl), by);
			error = "true";
		} catch (IOException e) {
			SysLog.error(e);
			e.printStackTrace();
		}
		return error;
	}
	
	
	
	public long getMaxSize() {
		return maxSize;
	}

	public String getSuffix() {
		return suffix;
	}

	public String getBasePath() {
		return basePath;
	}

	public String getFileUrl() {
		return fileUrl;
	}

	public String getFileName() {
		return fileName;
	}

	public String getSavePath() {
		return savePath;
	}

	public String getSaveUrl() {
		return saveUrl;
	}

	public long getFileSize() {
		return fileSize;
	}

	public byte[] getBy() {
		return by;
	}

	public void setMaxSize(long maxSize) {
		this.maxSize = maxSize;
	}

	public void setFileName(String fileName) {
		this.fileName = fileName;
	}
}

这样就完成了图片上传的全过程！由于layUI目前不支持图片和页面中的其他字段一同上传到后台，所以图片将采用异步上传的方式，这样将产生两个请求。

扫码领红包咯！领取余额宝红包，支付时用余额宝支付，就可以使用了！（少则1元，多则3-10元）时间有限哦

qzw_wmh

关注

6
点赞
踩
23

收藏

觉得还不错? 一键收藏
8
评论
layUI中点击按钮选择图片(不自动上传)，然后点击上传按钮，上传图片(可以上传多个文件)

效果图：1、点击“选择文件”，进行选择将要上传的文件；2、选择好将要上传的文件，文件名称显示在“选择文件”按钮后面；3、点击“开始上传”按钮，显示在页面上，图片信息传到后台中，将图片进行保存；4、还可以上传多个文件。效果图上完了，就开始代码咯！ //layUI代码&lt;div class="layui-upload"&gt; &lt;span...
复制链接

扫一扫