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

2024-12-12 08:22:07

本文实例为大家分享了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 MultipartFile实现图片文件上传示例

整理文档,搜刮出一个SpringMvc MultipartFile实现图片文件上传示例,稍微整理精简一下做下分享. spring-servlet.xml  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver&qu
spring mvc+localResizeIMG实现HTML5端图片压缩上传

最近在做一个移动端HTML5的应用,使用到了上传功能,起初使用传统的上传方式上传手机拍照的照片,由于手机拍照出来的照片一般都是好几MB,所以上传速度是非常慢的. 在网上找了很久找到了localResizeIMG压缩框架,感觉非常的实用,所以在此分享给大家. 第一步:下载localResizeIMG localResizeIMG放在github中的,地址是:https://github.com/think2011/localResizeIMG. 第二步:在web工程中导入localResizeIM
SpringMVC上传图片与访问

关于springmvc上传图片的方法小编给大家整理了两种方法,具体内容如下所示: 第一种:(放在该项目下的物理地址对应的位置) a. 路径写法: String basePath="/WEB-INF/resources/upload"; String filePathName= request.getSession().getServletContext().getRealPath(basePath);存放路径 b. 实际路径: D:\WorkSpace\.metadata\.plugi
SpringMVC框架实现上传图片的示例代码

一.创建图片虚拟目录在上传图片之前,先要设置虚拟目录(以IDEA为例) 打开工具栏的运行配置Edit Configurations 添加物理目录和并设置虚拟目录路径添加img图片在img文件夹内测试访问:http://localhost:8080/img/img.jpg 二.SpringMVC上传头像 1.SpringMVC对多部件类型的解析上传图片SpringMVC.xml配置在页面form中提交enctype="multipart/form-data"的数据时,需要spr
详解SpringMVC实现图片上传以及该注意的小细节

先附上图片上传的代码 jsp代码如下: <form action="${path}/upload/uploadPic.do" method="post" enctype="multipart/form-data"> <div> ![](${path}/mall/image/load_image.png) <input type="file" id="input-image" n
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

整合前的准备步骤 1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好. 2.下载bootstrap fileinput组件源码: https://github.com/kartik-v/bootstrap-fileinput/ 搭建后的效果图图1. 图2. 图3. 图4. 图5. 在需要编写的jsp页面引入组件本工程的路径界面如下: 在jsp引入组件需要的js
android实现图片上传功能（springMvc）

本文实例为大家分享了Android图片上传的具体代码,供大家参考,具体内容如下 Android端: String fileName = tvFilename.getText().toString(); RequestBody description = RequestBody.create( okhttp3.MultipartBody.FORM, fileName); File fileImage = new File(saveFileName); RequestBody requestBody
SpringMVC中MultipartFile上传获取图片的宽度和高度详解

SpringMVC一般使用MultipartFile来做文件的上传,通过MultipartFile的getContentType()方法判定文件的类型(MIME) ".doc":"application/msword" ".jpg":"image/jpeg" ".jpeg":"image/jpeg" ".png":"image/png" -. 有时
springMVC图片上传的处理方式详解

本文实例为大家分享了springMVC图片上传的处理方式,供大家参考,具体内容如下首先需要依赖的jar包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>
spring boot 图片上传与显示功能实例详解

首先描述一下问题,spring boot 使用的是内嵌的tomcat, 所以不清楚文件上传到哪里去了, 而且spring boot 把静态的文件全部在启动的时候都会加载到classpath的目录下的,所以上传的文件不知相对于应用目录在哪,也不知怎么写访问路径合适,对于新手的自己真的一头雾水. 后面想起了官方的例子,没想到一开始被自己找到的官方例子,后面太依赖百度谷歌了,结果发现只有官方的例子能帮上忙,而且帮上大忙,直接上密码的代码 package hello; import static org
使用python flask框架开发图片上传接口的案例详解

python版本:3.6+ 需要模块:flask,pillow 需求:开发一个支持多格式图片上传的接口,并且将图片压缩,支持在线预览图片. 目录结构: app.py编辑内容: from flask import Flask, request, Response, render_template from werkzeug.utils import secure_filename import os import uuid from PIL import Image, ExifTags app =
java实现图片上传至本地实例详解

在工作中要求将图片上传至本地,如下代码将介绍如何将图片上传至本地准备工作: 环境:eclipse4.5-x64,jdk1.7-x64,maven3 tomcat服务器配置图片上传映射: 上传至本地服务器配置文件:image.properties #\u672c\u5730\u670d\u52a1\u5668\u56fe\u7247\u4fdd\u5b58\u8def\u5f84 IMAGEPATH=/mall/upload/image/ #\u56fe\u7247\u540e\u7f00\u5
微信小程序开发（二）图片上传+服务端接收详解

这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了首先是小程序的wxml代码 <view class="xd-container">
ThinkPHP实现图片上传操作的方法详解

本文实例讲述了ThinkPHP实现图片上传操作的方法.分享给大家供大家参考,具体如下: 直接上个例子,其中包括有单图片文件上传.多图片文件上传.以及删除文件的一些操作.放置删除数据库的时候,仅仅删除掉了数据库之中的文件路径.而不是一并删除服务器之中的文件.放置服务器爆炸.. TP里面common文件夹里面function.php里面自定义方法: <?php //文件上传类(可以设置多个参数) function upload($file=null,$maxSize=0,$exts=0,$saveP
Django 实现图片上传和显示过程详解

第1章新建工程和创建app 新建工程和创建app就不用贴出来了,我这里是测试图片上传的功能能否实现,所以项目都是新的,正常在以有的app下就可以第2章模型层: 2.1创建数据库 from django.dbimport models # Create your models here. class User(models.Model): name= models.CharField(max_length=50) # upload_to 指定上传文件位置 # 这里指定存放在img/ 目录下
Vue + Element UI图片上传控件使用详解

上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu
图片上传插件jquery.uploadify详解

1.js代码: 复制代码代码如下: <script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf' 'script' : '<%=basePath%>
SpringMVC文件上传的配置实例详解

记述一下步骤以备查. 准备工作: 需要把Jakarta Commons FileUpload及Jakarta Commons io的包放lib里. 我这边的包是: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 然后在spring-servlet.xml进行multipartResolver配置,不配置好上传会不好用. <bean id="multipartResolver" class="org.springfram

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

相关推荐

随机推荐