ajax简单异步图片上传,Ajax简单异步上传图片并回显
前台代码
上传图片按钮
选择图片
隐藏的文件选择器
图片预览
去除图片预览未选择时默认时的边框
img[src=""],img:not([src]){
opacity:0;
}
JavaScript部分
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("上传失败")
}
});
}
后台代码
/**
* 图片上传
* @param photo
* @param request
* @return
*/
@RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)
@ResponseBody
public Map uploadPhoto(MultipartFile photo, HttpServletRequest request) {
Map ret = new HashMap();
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简单异步图片上传,Ajax简单异步上传图片并回显相关推荐
- php+js实现异步图片上传,JavaScript实现异步图像上传功能
当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成.本文的重点是在图像上传至服务器时使用JavaScript立即显示图像. 介绍 当使用JavaScript将图像 ...
- alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- python自动上传图片_使用Python实现一个简单的图片上传存储服务
使用flask实现的一个简单的图片上传服务 设计初衷 对于图片的存储,有很多选择,一般采用云服务如(七牛,又拍等),但是国内的服务像七牛 自定义域名竟然需要域名备案(Excuse me,当初就是因为备 ...
- 用go来搭建一个简单的图片上传网站
提前说明一下:代码参考了<Go语言编程>,稍有变动, 自己亲自玩了一遍. 之前玩过go web server, 现在来用go来搭建一个简单的图片上传网站, 工作目录是:~/photoweb ...
- php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
- 用jsp实现简单的图片上传功能
用jsp实现简单的图片上传功能 1 先做一个页面,选择上传的图片 <body><form action="uploadServlet" enctype=" ...
- 一个.net6简单的图片上传(文件也可用)
#一个.net6简单的图片上传(文件也可用) ##页面 @{ViewData["Title"] = "图片上传Demo"; }<form asp-acti ...
- php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...
最新文章
- 扩增子分析QIIME. 3以管理员安装QIIME1.9.1至Ubuntu16.04
- 固态器件理论(9)晶闸管
- VMware中linux与window目录共享
- 【Henu ACM Round#17 D】Hexagons!
- 如何把自己github博客配置到一个腾讯云购买的自定义域名上
- el replace 表达式_EL表达式运算符、常用函数详解
- [ESC] EnTT 学习记录 2
- JavaScript学习(三十八)—面向过程与面向对象
- 程序员为什么非得参加一场编程竞赛?
- 多媒体技术 第一章 多媒体技术概述
- 03_使用决策树预测隐形眼镜类型
- 京东区块链(智臻链):1. 应用场景
- mysql修改数据库编码级_修改mysql数据库编码
- 单片机波特率不加倍c语言,51单片机硬件系统设计时,为什么用11.0592MHz的晶振而不用12MHz晶振的原因及串口波特率误...
- Python 获取视频fps工具(附代码) | Python工具
- Office安装时出现“无法安装 Office(64 位或 32 位)”错误
- Codeforces Round #829 (Div. 2)
- 最新微信小程序选题推荐-模拟考试试题试卷复习论坛平台SSM-JAVA【数据库设计、论文、源码、开题报告】
- 一文带你看透空气质量
- 气象超脑,释放了一只混沌蝴蝶
热门文章
- C#XmlHelper操作Xml文档的帮助类
- Wireshark入门:第一次亲密接触
- 自娱自乐的小题目(6)
- ***编程DIY (Delphi版) - 第2篇 单实例运行
- vue运行报错:Cannot find module 'webpack/bin/config-yargs'
- PHP 中 strpos(), stripos(),strrpos(), strripos() 的区别
- oj交java代码_UvaOJ java输入代码
- PHP中使用PDO操作MySQL
- V4L2抓取USB摄像头YUV视频数据代码
- 编程基本功:如何拆分一个大函数