一.单文件上传

前端代码

 <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实现文件异步上传的更多相关文章

  1. SpringMVC + AJAX 实现多文件异步上传

    转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...

  2. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

  3. 文件的上传(表单上传和ajax文件异步上传)

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...

  4. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  5. 普通文件的上传(表单上传和ajax文件异步上传)

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  6. SocketIo+SpringMvc实现文件的上传下载

    SocketIo+SpringMvc实现文件的上传下载 socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: GIT地址 ...

  7. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  8. 文件的上传(1)(表单上传和ajax文件异步上传)

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

  9. 小程序使用 Promise.all 完成文件异步上传

    小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...

随机推荐

  1. Excel特殊符号的录入与录入的秘诀

    软键盘就是输入法上的软键盘 右键单击软键盘 右键! 通过code函数得到符号的数字 按住alt键然后输入数字才可以得到符号 注意是在数字键盘  右边数字键盘区域 插入特殊符号 跳转方向的设置 如果超过 ...

  2. 使用 Git和Github

    本地库初始化 git init 效果: 注意: .git 目录中存放的是本地库相关的子目录和文件,不要删除,也不要胡 乱修改. 设置签名 其实就是为了区分不同开发人员的身份需要设置一下自己的信息,包括 ...

  3. Apache Derby-01介绍DERBY

    1.DERBY是什么: Apache Derby 是IBM于2004年贡献给Apache软件基金会的数据库,于2005年正式成为开源项目,Derby作为一个基于JAVA的关系型数据库框架,他拥有许多便 ...

  4. 微服务实战——微服务架构选型SpringCloud / Dubbo / K8S比较(一)

    ## 说在前面 大概是三年前,因一些原因公司原项目最初为单体结构部署,所有业务模块都在一个项目里面,而后随着业务的不断膨胀以及模块之间的耦合,导致后面增加或修改一些简单业务时的成本都会变的极大.新入职 ...

  5. $bzoj3872\ [Poi2014]\ Ant\ colony$ 二分+$dp$

    正解:二分+$dp$ 解题报告: 传送门$QwQ$ 一年过去了依然没有头绪,,,$gql$的$NOIp$必将惨败了$kk$. 考虑倒推,因为知道知道除数和答案,所以可以推出被除数的范围,然后一路推到叶 ...

  6. Frangi形态学滤波详解

    利用Hessian矩阵的滤波函数Frangi,网上的文章只是把论文中的公式贴出来了. 我感觉分析下滤波函数是怎么起作用,还是挺有意思的一件事情. Frangi滤波方法的论文是: Frangi A F, ...

  7. PHP 对接第三方 LINE 登录,网上找到相关的不多 但是网上哪些乱七八糟的啰啰嗦嗦 要么就是怎么做的, 什么步骤 总会给你省略, 如果有幸你看到我的 可以放心的复制即用, 当然 你也可以用postman去尝试 不过我觉得既然做开发 就没必要那个了! 如果用postman再最后一步的时候 请用本文最下方式

    * LINE 官方文档:https://developers.line.biz/en/docs/line-login/getting-started/* 开发者平台地址:https://develop ...

  8. html 贪吃蛇代码

    最近在搞自己的网站,维护的时候准备放个贪吃蛇上去,顶一下原有的页面. 这个贪吃蛇有一点毒.原来设定了100级:100级刚开局就挂了.后来改掉了选项菜单,修复了. 还有什么bug,欢迎点击侧边的QQ按钮 ...

  9. SpringBoot系列之集成Dubbo的方式

    SpringBoot系列之集成Dubbo的方式 本博客介绍Springboot框架集成Dubbo实现微服务的3种常用方式,对于Dubbo知识不是很熟悉的,请先学习我上一篇博客:SpringBoot系列 ...

  10. Spring注解:InitBinder

    注解 InitBinder 是用来初始化绑定器Binder的,而Binder是用来绑定数据的,换句话说就是将请求参数转成数据对象. @InitBinder用于在@Controller中标注于方法,表示 ...