当前位置: 移动技术网 > IT编程>开发语言>Java > springMVC图片上传的处理方式详解

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

2019年07月19日  | 移动技术网IT编程  | 我要评论

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

首先需要依赖的jar包:

<dependency>
  <groupid>commons-io</groupid>
  <artifactid>commons-io</artifactid>
  <version>1.3.2</version>
</dependency>
<dependency>
  <groupid>commons-fileupload</groupid>
  <artifactid>commons-fileupload</artifactid>
  <version>1.2.1</version>
</dependency>

页面:

<a href="javascript:;" rel="external nofollow" class="a-upload">
  <input class="" type="file" name="file" id="file" required="required">上传
</a>

大家如果觉得默认的上传文件的按钮不好看,可以引入下面的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;
 filter: 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('<div class="img-preview"><img src="' + result + '"/></div>');
  } 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;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网