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)
@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简单异步上传图片并回显的更多相关文章
- NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】
近期在看NodeJS相关 不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合 在接触NodeJS时受平时Java或者C#中API接口等开发的思 ...
- Ajax实现异步上传图片
要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- 使用Dropzone上传图片及回显演示样例
一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...
- asp.net MVC Ajax.BeginForm 异步上传图片的问题
当debug到这里,你们就发现不管是 Request.Files["Upload"]亦或 Request.Files[0] 都不会取到文件流. 这就是我要说的,当使用Ajax.Be ...
- 异常-----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在页面不刷新的情况下去加载的时候只会把 ...
- springboot 上传图片与回显
在网上找了很多例子,不能完全契合自己的需求,自行整理了下.需求是这样的:项目小,所以不需要单独的图片服务器,图片保存在服务器中任意的地方,并且可以通过访问服务器来获取图片.话不多说上代码: 1.依赖 ...
- Element upload组件上传图片与回显图片
场景:新增商品时需要添加商品主图,新增成功之后可编辑 上传图片: <el-form-item label="专区logo:" style="height:160px ...
- js 上传图片进行回显
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SpringMVC学习(四)———— 数据回显与自定义异常处理器
一.数据回显技术 Springmvc默认支持对pojo类型的数据回显,默认不支持简单类型的数据回显 1.1.什么是数据回显? 在信息校验时,如果发生校验错误,那么把校验的数据信息,依然停留在当前页面, ...
随机推荐
- Python模拟登陆某网教师教育网
本文转载自看雪论坛[作者]rdsnow 不得不说,最近的 Python 蛮火的,我也稍稍了解了下,并试着用 Python 爬取网站上的数据 不过有些数据是要登陆后才能获取的,我们每年都要到某教师教育网 ...
- Mac下安装和配置Vue项目
题记:学vue有一段时间了,终于今天下定决心每日书写一篇学习笔记.1.访问node.js官网:https://nodejs.org/en/ 下载对应安装包.2.安装完成,在终端输入 : node -v ...
- 使用NSFileManager管理文件系统
文件系统作为被所有进程使用的基本资源之一,在macOS和iOS中主要用于处理数据文件.应用程序以及与操作系统自身相关的持久存储. iOS中的文件系统格式为HFS Plus,macOS中的主要格式也是H ...
- vue处理换行符
1.处理换行符 <tr class="unread" v-for="(item,index) in DataList" :key="index& ...
- Centos超详细安装步骤
Linux中三大主流操作系统 Ubuntu 优点:用户界面友好.工具完善 缺点:vps(虚拟服务器)成本较高.不具备商业化服务器操作系统 Centos--目前常用centos6.x,centos7.x ...
- Image Processing and Analysis_8_Edge Detection:Learning to Detect Natural Image Boundaries Using Local Brightness, Color, and Texture Cues ——2004
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...
- You're currently running Fcitx with GUI 错误解决 Fcitx
在英文版ubuntu配置输入法时,点击 Configure Current Input Method 会报以下的错误: You’re currently running Fcitx with GUI, ...
- IMSI-catcher:可发现附近手机敏感信息的工具
严正声明:该工具主要是为了让大家更好的了解GSM网络的工作原理而设计开发的,请不要用于恶意目的! 前言 IMSI-catcher是一个可以帮助你发现附近手机的IMSI号码,国家,品牌和运营商等信息 ...
- 网络编程基础之TCP编程学习(一)
网络编程基础了解 socket套接字 socket是一种通讯机制,它包含一整套的调用接口和数据结构的定义,他给应用程序提供了使用如TCP/UDP等网络通讯的手段. linux中的网络编程通过socke ...
- Week08_day01 (Hive开窗函数 row_number()的使用 (求出所有薪水前两名的部门))
数据准备: 7369,SMITH,CLERK,7902,1980-12-17,800,null,20 7499,ALLEN,SALESMAN,7698,1981-02-20,1600,300,30 7 ...