Ajax简单异步上传图片并回显
前台代码
上传图片按钮
<a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</a>
隐藏的文件选择器
<input type="file" id="photoFile" style="display: none;" onchange="upload()">
图片预览
<img id="preview_photo" src="" width="200px" height="200px">
去除图片预览未选择时默认时的边框
<style>img[src=""],img:not([src]){opacity:0;}
</style>
JavaScript部分
<script>function uploadPhoto() {$("#photoFile").click();}/*** 上传图片*/function upload() {if ($("#photoFile").val() == '') {return;}var formData = new FormData();formData.append('photo', document.getElementById('photoFile').files[0]);$.ajax({url:"${pageContext.request.contextPath}/system/uploadPhoto",type:"post",data: formData,contentType: false,processData: false,success: function(data) {if (data.type == "success") {$("#preview_photo").attr("src", data.filepath+data.filename);$("#productImg").val(data.filename);} else {alert(data.msg);}},error:function(data) {alert("上传失败")}});}
</script>
后台代码
/*** 图片上传* @param photo* @param request* @return*/@RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)@ResponseBodypublic Map<String, String> uploadPhoto(MultipartFile photo, HttpServletRequest request) {Map<String, String> ret = new HashMap<String, String>();if (photo == null) {ret.put("type", "error");ret.put("msg", "选择要上传的文件!");return ret;}if (photo.getSize() > 1024 * 1024 * 10) {ret.put("type", "error");ret.put("msg", "文件大小不能超过10M!");return ret;}//获取文件后缀String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1, photo.getOriginalFilename().length());if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {ret.put("type", "error");ret.put("msg", "请选择jpg,jpeg,gif,png格式的图片!");return ret;}//获取项目根目录加上图片目录 webapp/static/imgages/upload/String savePath = request.getSession().getServletContext().getRealPath("/") + "/static/images/upload/";File savePathFile = new File(savePath);if (!savePathFile.exists()) {//若不存在该目录,则创建目录savePathFile.mkdir();}String filename = new Date().getTime() + "." + suffix;try {//将文件保存指定目录photo.transferTo(new File(savePath + filename));} catch (Exception e) {ret.put("type", "error");ret.put("msg", "保存文件异常!");e.printStackTrace();return ret;}ret.put("type", "success");ret.put("msg", "上传图片成功!");ret.put("filepath", request.getSession().getServletContext().getContextPath() + "/static/images/upload/");ret.put("filename", filename);return ret;}
转载于:https://www.cnblogs.com/yxmhl/p/11617497.html
Ajax简单异步上传图片并回显相关推荐
- java回显怎么实现_Java实现简单的server/client回显功能
Java实现简单的server/client回显功能 Socket是指在一个特定编程模型下,进程间通信链路的端点.因为这个特定编程模型的流行,Socket这个名字在其他领域得到了复用,包括Java叫技 ...
- NodeJS+Express+MongoDB 简单实现数据录入及回显展示【Study笔记】
近期在看NodeJS相关 不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合 在接触NodeJS时受平时Java或者C#中API接口等开发的思 ...
- java spring 上传图片,springboot 上传图片并回显
之前也有做过上传图片的功能,不过是用在ssm的项目中,也有很多的不完美. 这次用的springboot,基本上对上传图片又有了一定的认识,想再这里记录一下./** * 上传图片 * * @return ...
- antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制 排序等功能 需要 re ...
- 【java】批量上传图片并回显功能
一.前言 在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
- springboot 上传图片并回显
之前也有做过上传图片的功能,不过是用在ssm的项目中,也有很多的不完美. 这次用的springboot,基本上对上传图片又有了一定的认识,想再这里记录一下. /*** 上传图片** @return*/ ...
- java上传图片回显_【java】批量上传图片并回显功能
一.前言 在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
- 使用Dropzone上传图片及回显示例
一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"><div class="col-md-12" ...
- 解决微信小程序上传图片不能回显的问题
后台处理要正确 首先要保证后台采用根据系统自动识别的方法返回地址分隔符 (File.separator) 系统不同,结果不同. 按上述所说,后台根据系统自动识别,那么Linux系统将不会出现问题,返回 ...
最新文章
- xshell启动报nssock2_nssock2.dll,下载,简介,描述,修复,等相关问题一站搞定_DLL之家
- JQuery移除事件
- 实验吧— Crypto Write up(一)
- MSSQL 标量函数
- MySQL存储过程相互调用
- python魔法方法str_8.9.魔法方法 - str()方法
- php 匹配多个字符串,php 字符串中是否包含指定字符串的多种方法
- Android模拟器所支持的OpenGL ES扩展
- 20155226 实验三 敏捷开发与XP实践 实验报告
- linux安装kafka_巨杉Tech | 基于Kafka+Spark+SequoiaDB实时处理架构快速实战
- 微信小程序使用QQ音乐API完整实例
- win7 、2008 提示Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法...
- 辞职专心造火箭,贝佐斯能追上马斯克吗?
- 如何自己搭建外卖红包平台,操作外卖CPS佣金提成实现躺赚?
- centos 6.8 请教笔记本上的虚拟机如何配置无线网络 桥接联网
- 【路径规划】遗传算法求解考虑分配次序的多无人机协同目标分配问题
- Android基础入门教程——4.1.2 Activity初窥门径
- 重新编译Spark2.4.0 Parcels包
- Python实现Word表格转成Excel表格
- 经典风险因子模型 对于中国股票市场定价解释能力初探
热门文章
- sftp取代ftp的之后的权限设置
- 制作一本《First Love, Last Rites》之二
- 配置虚拟机Ubuntu网络连接
- 命令行配合sqlplus管理Oracle
- PyCharm 快捷操作
- C语言 将程序运行的时间记录在记事本中,下次运行进行读取
- 骁龙617 android7,骁龙617手机有哪些?骁龙617手机汇总
- python第三十课--异常(raise关键字)
- str、tuple、dict之间的相互转换
- loaction.reload(false)和location.reload(true) js发起请求