layui+springmvc实现文件异步上传
一.单文件上传
前端代码
<div class="layui-upload">
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
<button type="button" class="layui-btn" id="upload_btn">上传图片</button> </div>
layui.use('upload', function() {
var $ = layui.jquery
, upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#upload_btn'
, url: '/uploadImg'
, before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //图片链接(base64)
});
}
, done: function (res) {
//如果上传失败
if (res.code === 0){
return layer.msg('文件上传成功!');
}
if (res.code === 2) {
return layer.msg('不支持该上传类型');
}
if (res.code === 3) {
return layer.msg('文件为空');
}else{
return layer.msg('文件上传异常');
}
//上传成功
}
, error: function () {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
后端代码
在这边遇到一些问题:
1.springmvc的xml需要配置文件上传的类,否则会接收不了上传的文件
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置上传文件最大尺寸,单位为B -->
<property name="maxUploadSize" value="1000000000" />
</bean>
2.接收文件需要用@RequestParam("file")指定参数名称,layui默认文件上传的name是file
3.获取项目的绝对路径并拼接成新的图片地址
@Controller
public class FileUploadController {
@RequestMapping("/uploadImg")
@ResponseBody
public RetResult upload(@RequestParam("file") MultipartFile multipartFile, HttpSession session){ if (!StringUtils.isEmpty(multipartFile) && multipartFile.getSize()>0){
String filename = multipartFile.getOriginalFilename();
String suffix = filename.substring(filename.lastIndexOf(".") + 1);
if (filename.endsWith("jpg")||filename.endsWith("png")){ String realPath = session.getServletContext().getRealPath("/")+"/image/"+new Date().getTime()+"."+suffix;
File newfile = new File(realPath);
try {
multipartFile.transferTo(newfile);
return RetResult.successRet(null);
} catch (IOException e) {
e.printStackTrace();
return RetResult.errorRet(1,"文件上传异常");
}
}else {
return RetResult.errorRet(2,"不支持该上传类型");
}
}else {
return RetResult.errorRet(3,"文件为空");
} }
}
layui+springmvc实现文件异步上传的更多相关文章
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- 文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- 普通文件的上传(表单上传和ajax文件异步上传)
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- SocketIo+SpringMvc实现文件的上传下载
SocketIo+SpringMvc实现文件的上传下载 socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: GIT地址 ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- 文件的上传(1)(表单上传和ajax文件异步上传)
文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...
- 小程序使用 Promise.all 完成文件异步上传
小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...
随机推荐
- javaweb项目添加log4j日志
谈到我们在Java程序中经常用的日志,Log4j应该是耳熟能详了.这里先提下slf4j,英文全名是Simple Logging Facade for Java,直面意思是:Java的简单日志门面.sl ...
- form表单提交方式实现浏览器导出Excel
刚开始使用ajax做Excel导出,发现ajax做不了浏览器导出只能下载到本地,于是用form提交可以提供浏览器下载Excel. 1>用ajax做本地下载: FileOutputStream f ...
- java通过freemarker模板导出pdf
需求:将网页内容导出为pdf文件,其中包含文字,图片,echarts图 原理:利用freemarker模板与数据渲染所得到的html内容,通过ITextRenderer对象解析html内容生成pdf ...
- ReentrantLock 源码分析从入门到入土
回答一个问题 在开始本篇文章的内容讲述前,先来回答我一个问题,为什么 JDK 提供一个 synchronized 关键字之后还要提供一个 Lock 锁,这不是多此一举吗?难道 JDK 设计人员都是沙雕 ...
- 非常完整的线性DP及记忆化搜索讲义
基础概念 我们之前的课程当中接触了最基础的动态规划. 动态规划最重要的就是找到一个状态和状态转移方程. 除此之外,动态规划问题分析中还有一些重要性质,如:重叠子问题.最优子结构.无后效性等. 最优子结 ...
- 浅析vue封装自定义插件
在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装 ...
- Linux下搭建C/C++编程环境
Linux下搭建C/C++编程环境 1.KDevelop下载 wget -O KDevelop.AppImage https://download.kde.org/stable/kdevelop/5. ...
- Java类成员之内部类
内部类含义: 在Java中允许一个类的定义位于另一个类的内部,前者称为内部类,后者称为外部类. Inner class 一般用在定义它的类或语句块之内,在外部引用它时必须给出完整的名称. Inner ...
- EntityFramework Core表名原理解析,让我来,揭开你神秘的面纱
前言 上一节我们针对最开始抛出的异常只是进行了浅尝辄止的解析,是不是有点意犹未尽的感觉,是的,我也有这种感觉,看到这里相信您和我会有一些疑惑,要是我们接下来通过注解.Fluent APi.DbSet分 ...
- 对Java中可变参数的理解
说明 可变参数:是DK1.5之后出现的新特性,其实可变参数是0.1.2.3.....个参数的数组 使用前提 当方法的参数列表数据类型已经确定,但是参数的个数不确定,就可以使用可变参数 使用格式 修饰符 ...