springMVC图片上传的处理方式详解

网友投稿 331 2023-04-15


springMVC图片上传的处理方式详解

本文实例为大家分享了springMVC图片上传的处理方式,供大家参考,具体内容如下

首先需要依赖的jar包:

  commons-io

  commons-io

  1.3.2

  commons-fileupload

  commons-fileupload

  1.2.1

页面:

  上传

大家如果觉得默认的上传文件的按钮不好看,可以引入下面的css样式:

.a-upload {

padding: 4px 10px;

height: 27px;

line-height: 27px;

position: relative;

cursor: pointer;

color: #888;

background: #fafafa;

border: 1px solid #ddd;

border-radius: 4px;

overflow: hidden;

}

.a-upload input {

position: absolute;

width: 100%;

right: 0;

top: 0;

opacity: 0;

filteYxgWnSdLVGr: alpha(opacity=0);

cursor: pointer

}

.a-upload:hover {

color: #444;

background: #eee;

border-color: #ccc;

text-decoration: none

}

前端脚本:

$('#file').on('change', function () {

var $this = $(this);

var formData = new FormData();

formData.append('file', $('#file')[0].files[0]);

var fileName = $('#file')[0].files[0].name;

var fileType = fileName.substring(fileName.lastIndexOf('.') + 1);

var fileSize = $('#file')[0].files[0].size;

if (fileType != 'jpg' && fileType != 'png' && fileType != 'gif') {

alert("请上传.jpg、.png、.gif格式的图片!");

return;

}

if (fileSize > 300 * 1024) {

alert("请上传大小小于300KB的图片!");

return;

}

$.ajax({

url: '/admin/upload',

type: 'POST',

data: formData,

cache: false,

processData: false,

contentType: false

}).done(function (result) {

if (result != '') {

$this.closest('div').append('

} else {

alert("请上传.jpg、.png、.gif格式的图片!");

}

}).fail(function () {

alert("图片上传失败!");

});

});

后端接收:

@RequestMapping(value = "admin/upload", method = RequestMethod.POST)

@ResponseBody

public String uploadFile(@RequestParam("file") MultipartFile file) {

try {

String filename = file.getOriginalFilename();

if (filename.endsWith("jpg") || filename.endsWith("png") || filename.endsWith("gif")) {

String prefix = filename.substring(filename.lastIndexOf("."));

String imgName = UUID.randomUUID().toString() + prefix;

String imgUri = writeToFileSystem(imgName, file.getBytes());

return imgUri;

}

} catch (Exception e) {

LOG.error("uploadFile failed:", e);

}

return null;

}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:mock接口可视化工具(接口可视化界面)
下一篇:DVA框架统一处理所有页面的loading状态
相关文章

 发表评论

暂时没有评论,来抢沙发吧~