前台代码

上传图片按钮

<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)
@ResponseBody
public 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;
}

Ajax简单异步上传图片并回显的更多相关文章

  1. NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】

    近期在看NodeJS相关 不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合 在接触NodeJS时受平时Java或者C#中API接口等开发的思 ...

  2. Ajax实现异步上传图片

    要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. 使用Dropzone上传图片及回显演示样例

    一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...

  4. asp.net MVC  Ajax.BeginForm 异步上传图片的问题

    当debug到这里,你们就发现不管是 Request.Files["Upload"]亦或 Request.Files[0] 都不会取到文件流. 这就是我要说的,当使用Ajax.Be ...

  5. 异常-----springmvc + ajaxfileupload解决ajax不能异步上传图片的问题。java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.

    说明这个问题产生的原因主要是form表单上传图片的时候必须是Content-Type:"multipart/form-data,这种格式的,但是ajax在页面不刷新的情况下去加载的时候只会把 ...

  6. springboot 上传图片与回显

    在网上找了很多例子,不能完全契合自己的需求,自行整理了下.需求是这样的:项目小,所以不需要单独的图片服务器,图片保存在服务器中任意的地方,并且可以通过访问服务器来获取图片.话不多说上代码: 1.依赖 ...

  7. Element upload组件上传图片与回显图片

    场景:新增商品时需要添加商品主图,新增成功之后可编辑 上传图片: <el-form-item label="专区logo:" style="height:160px ...

  8. js 上传图片进行回显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. SpringMVC学习(四)———— 数据回显与自定义异常处理器

    一.数据回显技术 Springmvc默认支持对pojo类型的数据回显,默认不支持简单类型的数据回显 1.1.什么是数据回显? 在信息校验时,如果发生校验错误,那么把校验的数据信息,依然停留在当前页面, ...

随机推荐

  1. 【Hibernate】事务处理

    一.概述 一.概述 事务 事务就是逻辑上的一组操作,要么全都成功,要么全都失败!!! 事务特性 原子性:事务一组操作不可分割. 一致性:事务的执行前后,数据完整性要保持一致. 隔离性:一个事务在执行的 ...

  2. H265编码等级以及图像的基础知识

    1. H265编码等级 H264编码profile & level控制 .H265编码初探 H265 profile H265 Profile & Level & Tier 介 ...

  3. 求输入数字的阶乘 及加和 #s=1!+2!+3!+…..+n!

    #s=1!+2!+3!+…..+n! from functools import reduce def factorial(n): result=0 for i in range(1,n+1): re ...

  4. 透过字节码生成审视Java动态代理运作机制

    对于动态代理我想应该大家都不陌生,就是可以动态去代理实现某个接口的类来干一些我们自己想要的功能,但是在字节码层面它的表现是如何的呢?既然目前刚好在研究字节码相关的东东,有必要对其从字节码角度来审视一下 ...

  5. Nginx入门(一)——安装和配置

    1.下载地址 http://nginx.org/en/download.html 2.启动Nginx 进入window的cmd窗口,输入如下图所示的命令,进入到nginx目录(F:/nginx-1.8 ...

  6. 向导中的参数传递 wizard param

    1.在向导页中使用WizardPage.this.getNextPage()方法可以获取到下一页的向导页: 2.在向导wizard中addPages()方法初始化的时候把整个页面传进去. 例:Wiza ...

  7. C语言calloc()函数:分配内存空间并初始化——stm32中的应用

    经常在代码中看到使用malloc来分配,然后memset清零,其实calloc更加方便,一句顶两句~ 头文件:#include <stdlib.h> calloc() 函数用来动态地分配内 ...

  8. HDU-3341-Lost's revenge(AC自动机, DP, 压缩)

    链接: https://vjudge.net/problem/HDU-3341 题意: Lost and AekdyCoin are friends. They always play "n ...

  9. maven工程中dubbo与spring整合

    1)引入相应jar包 <!-- 引入dubbo服务 start--> <dependency> <groupId>com.alibaba</groupId&g ...

  10. Vue项目搭建流程

    记录一下vue项目的搭建流程. 1.安装node.npm 下载地址为:https://nodejs.org/en/ 设置环境变量,命令行分别输入: node -v   npm -v  查看安装是否成功 ...