当前位置: 首页 > 编程笔记 >

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

戎洛华
2023-03-14
本文向大家介绍springMVC图片上传的处理方式详解,包括了springMVC图片上传的处理方式详解的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了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;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍SpringMVC上传图片与访问,包括了SpringMVC上传图片与访问的使用技巧和注意事项,需要的朋友参考一下 关于springmvc上传图片的方法小编给大家整理了两种方法,具体内容如下所示: 第一种:(放在该项目下的物理地址对应的位置) a. 路径写法: String basePath="/WEB-INF/resources/upload"; String filePathNam

  • 本文向大家介绍SpringMVC图片文件跨服务器上传,包括了SpringMVC图片文件跨服务器上传的使用技巧和注意事项,需要的朋友参考一下 图片文件跨服务器上传(我使用的公司云桌面作为上传服务器,自己的笔记本作为存储服务器测试的) 一、上传服务器: 1、pom文件(使用jersey插件) 2、前端页面: 3、后台controller: 二、存储图片文件服务器: 1、Tomcat的conf目录下的w

  • 本文向大家介绍Yii框架实现图片上传的方法详解,包括了Yii框架实现图片上传的方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Yii框架实现图片上传的方法。分享给大家供大家参考,具体如下: 今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考。 Model: 注:resource为数据表,表前缀可在main.php内设置,相信

  • 本文向大家介绍Angularjs上传图片实例详解,包括了Angularjs上传图片实例详解的使用技巧和注意事项,需要的朋友参考一下 •上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: •在相应的html中引入文件路径:<script src="lib

  • 本文向大家介绍详解vue 图片上传功能,包括了详解vue 图片上传功能的使用技巧和注意事项,需要的朋友参考一下 这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: 我这里做了图片数量的限制,最多6张。 然后是data数据,如下: imgs数组是放图片路径的,页面显示图片就是循环这个数组,imgData是判断图片类型的。 接下来是最重

  • 本文向大家介绍SpringMVC框架实现图片上传与下载,包括了SpringMVC框架实现图片上传与下载的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了SpringMVC框架实现图片上传与下载的具体代码,供大家参考,具体内容如下 1、新建一个Maven webapp项目,引入需要用的夹包,pom.xml文件的依赖包如下: 2、配置文件设置如下: (1) web.xml内容为: (2)s