效果图:
1、点击“选择文件”,进行选择将要上传的文件;
2、选择好将要上传的文件,文件名称显示在“选择文件”按钮后面;
3、点击“开始上传”按钮,显示在页面上,图片信息传到后台中,将图片进行保存;
4、还可以上传多个文件。
效果图上完了,就开始代码咯!
//layUI代码
单位平面图:
//选完文件后不自动上传(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('')
});
}
,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元)时间有限哦