JS使用H5实现图片预览

上传图片实现预览的功能，以下是代码的实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传预览</title>
<script type="text/javascript">
//预览图片,参数说明：第一个参数：要预览的file对象，第二个参数：预览的img标签的id名称
function yl(obj,id) {//FileReaderif(window.FileReader){//验证当前的浏览器是否支持图片预览var reader=new FileReader();var file=obj.files[0];var regexImage=/^image\//;//js正则表达式，匹配是否拥有imageif(regexImage.test(file.type)){//设置读取结束的回调函数reader.onload=function(data){var img=document.getElementById(id);img.src=data.target.result;//将结果数据显示到img标签上};//开始读取上传的文件内容reader.readAsDataURL(file);}else{alert("亲，看清楚是图片预览");return;}}else{alert("亲，浏览器该升级了");return;}
}</script>
</head>
<body>
<form action="fileup" method="post" enctype="multipart/form-data">
<input type="file" name="f1" onchange="yl(this,'ylimg')"/>
<img alt="图片预览" id="ylimg" width="400px" height="400px"/>
<input type="submit" value="上传图片"/>
</form>
</body>
</html>

挺好用的，记录一下！

JS使用H5实现图片预览相关推荐

php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...
js实现移动端图片预览：手势缩放，手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言本文将介绍如何通过js实现移动端图片预览,包括图片的预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
微信h5页面图片预览
引入js文件 <script type="text/javascript" src="jweixin-1.1.0.js"></script&g ...
html5 双指缩放图片,js实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
图片预览小窗口html,jQuery和css3超酷图片预览插件
这是一款使用css3和Velocity.js制作的jquery图片预览插件. 电子商务网站设计的宗旨是通过简化的设计提高用户体验,提高转化率也有一定的模式.另外一种模式是在需要的地方提供更多的信息来达 ...
h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
移动端图片预览插件-fly-zomm-img.min.js
移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...
H5图片预览及上传（WEB前端）
H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧. 一.html布局文件 html有一个自己的上传文件控件- ...

JS使用H5实现图片预览

JS使用H5实现图片预览相关推荐

最新文章

热门文章