项目总结07：JS图片的上传预览和表单提交（FileReader()方法）
JS图片的上传预览和表单提交（FileReader()方法）
一开始没有搞明白下面这块代码的，今天有时间简单整理下
核心点：FileReader()方法
以下是代码（以JSP文件为例）
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
//上传-预览逻辑
$(".newspic").click(function() { //1.点击默认图片，出发标签<a>的click事件
$(this).next('input').click();//2.触发input的点击事件，用户选择图片进行上传
});
function showPic(data) {//3.当用户上传图片后，触发input标签的onchange事件，执行showPic()方法
if (data.files && data.files[0]) {//4.判断input标签的file是否存在
var reader = new FileReader();//5.实例化一个FileReader()接口
reader.readAsDataURL(data.files[0]);//6.通过readAsDataURL()方法读取文件，将图片内嵌在网页之中
reader.onload = function(evt) {//7.调用FileReader()的onload事件，当文件读取成功时，执行8
//8.将reader的result属性值赋值给data.parentNode.childNodes[1].childNodes[1].src，实现图片预览
data.parentNode.childNodes[1].childNodes[1].src = evt.target.result;
}
}
} //上传-提交保存逻辑
//用户选择图片,点击提交；将数据通过表单(name-value)提交给后台；注意：需要表单enctype="multipart/form-data"；否则后台无法接受
</script>
</head>
<body>
<form action="hospital/saveHospital.do" name="editForm" method="post" enctype="multipart/form-data">
<a href="javascript:void(0)" class="newspic">
<!-- static/img/selectimg.png是默认图片，当reader读取完毕后，执行步骤8，即展示上传图片 -->
<img style="width:200px;height:100px;" src="static/img/selectimg.png"/>/
</a>
<input type="file" id="logoUrl" name="logoUrl" onchange="showPic(this)" style="display: none"/>
<button type="submit" >提交</button>
</form>
</body>
</html>
示例效果
项目总结07：JS图片的上传预览和表单提交（FileReader()方法）的更多相关文章
- js实现本地的图片压缩上传预览
js在设计时考虑到安全的原因是不允许读写本地文件的,随着html5的出现提供了fileReader AP从而可以I实现本地图片的读取预览功能, 另外在移动端有的限制图片大小的需求,主要是考虑图片过大会 ...
- 八 SpringMVC文件上传，必须设置表单提交为post
1 修改Tomcat配置,本地目录映射 那么在server.xml中体现为: 测试一下是否设置成功: 2 引入jia包 3 配置多媒体解析器 3 jsp开启图片上传 4 Controller层设置 ...
- 图片上传预览转压缩并转base64详解（dShowImg64.js）
hello,大家好,游戏开始了,欢迎大家收看这一期的讲解.本次的内容是图片的上传预览.最后发源码链接.废话不多说,先上图. 待上传图像 点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- HTML5图片上传预览
HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...
- jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
随机推荐
- 130. Surrounded Regions 卧槽！我半梦半醒之间做出来的。
打开这个题,做了一半躺下了. 结果,怎么都睡不着.一会一个想法,忍不住爬起来提交,要么错误,要么超时. 按照常规思路,依次对每个点检测是否是闭包,再替换,超时.计算量太大了. 还能怎么做呢?没思路,关 ...
- Flex_概念
1.Flex是事件驱动的面向对象应用程序框架和编程语言.Flex应用程序加载完毕后,需要做的就是捕获事件,然后作出响应. Flex是一个庞大的技术组群中的一员. 2.RIA(Rich Inte ...
- Servlet基本_クッキー、URLリライティング
1.クッキーの基礎クッキーは.クライアント側に保存されるテキストデータです. セキュリティ上の制約.・自分で発行したクッキーにしかアクセスできない.クッキーには発行元のホストの情報が記録されている.・ ...
- URL记录
http://orchome.com/5https://www.cnblogs.com/haozhengfei/p/2192231596ceb2ac4c22294dbd25a1ca.htmlhttps ...
- 修改 计算机名后，修改SQLserver 注册服务器对象的名称，及登陆名
select @@ServerName --查看当前所有数据库服务器名称select * from Sys.SysServers --修改数据库服务器名称sp_dropserver 'old_serv ...
- 关于maven中的快照版本（snapshot）与正式版本（release）解析。
Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...
- hiberate 配置相关
<hibernate-configuration> <session-factory name="mySessionFactory"> <proper ...
- Python调用外部系统命令
利用Python调用外部系统命令的方法可以提高编码效率.调用外部系统命令完成后可以通过获取命令执行返回结果码.执行的输出结果进行进一步的处理.本文主要描述Python常见的调用外部系统命令的方法,包括 ...
- python中itertools里的product和permutation
平时经常碰到全排列或者在n个数组中每个数组选一个值组成的所有序列等等问题,可以用permutation和product解决,很方便,所以在此mark一下吧 直接上代码 from itertools i ...
- 求1到n，n个整数的全排列
package com.dong.harder; public class AllArrays { public static void main(String[] args) { // TODO A ...