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

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

创新互联专注于企业营销型网站建设、网站重做改版、梁子湖网站定制设计、自适应品牌网站建设、H5开发、商城系统网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为梁子湖等各大城市提供网站开发制作服务。

首先需要依赖的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;
 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('');
  } 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;
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

本文名称：springMVC图片上传的处理方式详解
转载源于：http://cqcxhl.com/article/gjhpdg.html

重庆分公司，新征程启航

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

其他资讯