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 "";
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解SpringMVC实现图片上传以及该注意的小细节
先附上图片上传的代码 jsp代码如下: <form action="${path}/upload/uploadPic.do" method="post" enctype="multipart/form-data"> <div>  <input type="file" id="input-image" n
-
springMVC图片上传的处理方式详解
本文实例为大家分享了springMVC图片上传的处理方式,供大家参考,具体内容如下 首先需要依赖的jar包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>
-
SpringMVC框架实现图片上传与下载
本文实例为大家分享了SpringMVC框架实现图片上传与下载的具体代码,供大家参考,具体内容如下 1.新建一个Maven webapp项目,引入需要用的夹包,pom.xml文件的依赖包如下: <dependencies> <!-- 用于生成图片的缩略图 --> <dependency> <groupId>net.coobird</groupId> <artifactId>thumbnailator</artifactId>
-
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
-
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
-
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利用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"
-
SpringMVC使用第三方组件实现文件上传
一.文件上传的必要前提 A form 表单的 enctype 取值必须是:multipart/form-data (默认值是:application/x-www-form-urlencoded) enctype:是表单请求正文的类型 B method 属性取值必须是 Post C 提供一个文件选择域 input type=file 二.借助第三方组件实现文件上传 三. /** * springmvc跨服务器上传文件 * @return */ @RequestMapping("/testFileU
-
移动端利用H5实现压缩图片上传功能
此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法. 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的 实现.根据查看caniuse,本demo里使用到的FileRea
-
springmvc利用jquery.form插件异步上传文件示例
需要的下载文件: jQuery.form.js jquery.js commons-fileupload.jar commons-io.jar 示例图片 pom.xml <!-- 文件上传 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</ve
-
详解vue中使用vue-quill-editor富文本小结（图片上传）
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,通常来讲,每个服务器端接收的post的数据大小都是有限制的,这样的话有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器. 1.下载Vue-Quill-Editor npm install vue-quill-editor
-
利用Vue3和element-plus实现图片上传组件
目录 前言 具体代码 图片上传 上传组件 前言 element-plus 提供了 uploader 组件,但是不好定制化,所以自己又造了个轮子,实现了一个图片上传的组件,它的预期行为是: 1.还没上传图片时,显示上传卡片 2.上传图片时显示进度条,隐藏上传卡片 3.上传成功时显示图片缩略图,上传失败则显示失败提示 4.支持上传图片的预览和删除 具体如下图所示: 具体代码 图片上传 这里使用的图床是牛图网,无需注册,貌似也没有图片大小的限制,但是请不要上传违规图像. <code>import a
-
基于Node的React图片上传组件实现实例代码
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /
-
用element的upload组件实现多图片上传和压缩的示例代码
我用vuex做状态管理,七牛云做图床. 项目地址:多图片上传组件 效果展示 项目执行流程 首先,让我们来分析一下实现多图片上传的流程: 前端向后端请求用来上传图片至服务器的token 后端为每张要上传的图片生成一个图片名,并用这个图片名生成token 后端将图片名和token返回给前端 前端拿到token以后,将图片上传至服务器 上传成功以后,前端将图片名发给后端 后端将图片名存入数据库 项目实现过程 1.我们要利用element-ui的Upload组件布置界面: //upload.vue <e
-
vue中利用simplemde实现markdown编辑器（增加图片上传功能）
前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si
-
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat