SpringMVC利用dropzone组件实现图片上传

操作步骤如下

一、dropzone导入

01.dropzone官网下载其插件压缩包并复制项目;

02.将CSS和JS文件在HTML文件中引入;

//下面src中的地址根据自己文件地址进行修改,不能之间copy,否则可能用不了!!!
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/dropzone.min.css" rel="external nofollow" />
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/basic.min.css" rel="external nofollow" />
<script src="/static/assets/plugins/dropzone/min/dropzone.min.js"></script>

二、dropzone的使用

只需要一个 div 元素,用 JavaScript 代码启用即可

HTML 结构如下:

<div id="dropz" class="dropzone"></div>

JavaScript 启用代码如下:

<script>
var myDropzone = new Dropzone("#dropz", {
  url: "/upload", //需要上传的后台接口地址
  dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句
  paramName: "dropzFile", // 传到后台的参数名称
  init: function () {
    this.on("success", function (file, data) {
      // 上传成功触发的事件

    });
  }
});
</script>

前端工作做完后,后台需要提供文件上传支持,我们使用 Spring MVC 来接收上传的文件

三、SpringMVC的处理

commons-fileupload jar包导入

01.如果使用Meaven仓库,在其Pom.xml添加如下依赖。

<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.2</version>
</dependency>

如果未使用Meaven,百度commons-fileupload下载jar并复制到项目中。

配置 spring-mvc.xml

需要 Spring 注入 multipartResolver 实例,spring-mvc.xml 增加如下配置:

<!-- 上传文件拦截,设置最大上传文件大小 10M = 10*1024*1024(B) = 10485760 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <property name="maxUploadSize" value="10485760"/>
</bean>

Controller类的代码实现

@Controller
public class UploadController {

  @ResponseBody
  @RequestMapping(value = "upload", method = RequestMethod.POST)
  public String upload(MultipartFile dropzFile, HttpServletRequest request) {

    // 获取上传的原始文件名
    String fileName = dropzFile.getOriginalFilename();
    // 设置文件上传路径
    String filePath = request.getSession().getServletContext().getRealPath("/static/upload");
    // 获取文件后缀
    String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

    // 判断并创建上传用的文件夹
    File file = new File(filePath);
    if (!file.exists()) {
      file.mkdir();
    }
    // 重新设置文件名为 UUID,以确保唯一
    file = new File(filePath, UUID.randomUUID() + fileSuffix);

    try {
      // 写入文件
      dropzFile.transferTo(file);
    } catch (IOException e) {
      e.printStackTrace();
    }

    return "";
  }
}

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

时间: 2020-02-14

详解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

SpringMVC框架实现图片上传与下载

本文实例为大家分享了SpringMVC框架实现图片上传与下载的具体代码,供大家参考,具体内容如下 1.新建一个Maven webapp项目,引入需要用的夹包,pom.xml文件的依赖包如下: <dependencies> <!-- 用于生成图片的缩略图 --> <dependency> <groupId>net.coobird</groupId> <artifactId>thumbnailator</artifactId>

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

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

springmvc图片上传及json数据转换过程详解

springmvc的图片上传 1.导入相应的pom依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> 2.添加springmvc-servlet.xml里面的配置 <bean id=&q

webuploader+springmvc实现图片上传功能

本文为大家分享了webuploader springmvc实现图片上传的具体代码,供大家参考,具体内容如下 jsp文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu

android实现图片上传功能(springMvc)

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

Android中使用GridView实现仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下面的图片就是点击"加号"后弹出的对话框,通过对话框可以根据自己需求进行相片选择. 项目结构: 下面直接上代码. 整体的布局文件activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/

ReactNative实现图片上传功能的示例代码

最近在学习ReactNative,ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App,今天就学习一下ReactNative实现图片上传功能 在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的. 如果我们的项目里需要使用图片上传(用js 实现图片上传),那我们有没有什么办法呢? 通过搜索React-native的github, 会发现里面有这么一篇文章:https://github

yii2高级应用之自定义组件实现全局使用图片上传功能的方法

本文讲述了yii2高级应用之自定义组件实现全局使用图片上传功能的方法.分享给大家供大家参考,具体如下: 此例为yii2高组应用,这里只提供一个简单的事例 在yii2中,在使用到上传图片时有自带的一个上传图片类,但不太好用. 其中有一种方式,把自己写的一个上传图片类文件,注册成一个组件,在全局中使用.(我记得我在里面有写过一篇小物件的使用) 这里,我只作一个简单的自定义组件介绍 1.在backend(或frontend)定义一个 upload.php(注意路径: backend/component

Summernote实现图片上传功能的简单方法

还是接着之前说过的最近在写一个BootStrap网页....然后要用富文本编辑器,随便搜了下就选了这货 然后发现了很尴尬的问题...图片上传功能无效....然后各种搜索各种无果...最后怒翻Summernote官方文档总算解决了,总之写下解决过程 后端部分就不提供代码了,满大街都是,这里假设后端拿到上传文件后返回文件的地址 首先附上参考资料:Summernote官方开发文档 简单说下Summernote的图片上传功能实现方案 首先根据官方文档提供的API,挂接文件上传事件,然后自己用JS重新上传

Android将图片上传到php服务器的实例代码

layout中很普通,就是两个button和一个ImageView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=&q

FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能. 1. 打开网站后台编辑器里的admin/editor/fckconfig.js这个文件 找到FCKConfig.ImageUpload = false 这句,把false改成true就行啦. FCKConfig.ImageBrowser = false ; 这里也同样把false改成true 2. 看一下

thinkphp实现图片上传功能分享

1.我们首先需要创建一个表 复制代码 代码如下: CREATE TABLE IF NOT EXISTS `tp_image` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `image` varchar(200) NOT NULL,  `create_time` int(11) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 2.然后再conf文件里添加配置(最后一段配置

java通过模拟post方式提交表单实现图片上传功能实例

本文实例讲述了java通过模拟post方式提交表单实现图片上传功能.分享给大家供大家参考,具体如下: 模拟表单html如下: <form action="up_result.jsp" method="post" enctype="multipart/form-data" name="form1" id="form1"> <label> <input type="tex

基于ASP.NET+easyUI框架实现图片上传功能(表单)

基于ASP.Net +easyUI框架上传图片,实现图片上传,提交表单: <body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" type="text/css" /> <script charset="utf-8" src="../../Easyui/jquery.easyui.min.js" ty