js 点击文本框，预览选择图片

点击文件选择框，选择图片文件，通过FileReader对象，读取图片文件中的内容，存放于result中，具体代码如下

<input type="file" onchange="fileReader(this)" />
<div id="d"><img id="img" src="" />
</div>

<script type="text/javascript">
function fileReader(obj){var file = obj.files;var img = document.getElementById("img");var reader = new FileReader();// 操作图片if(/image/.test(file[0].type)){reader.readAsDataURL(file[0]);}else {alert('请选择图片!');obj.value = "";return;}// 图片加载错误reader.onerror = function(){document.write("图片加载错误");}// 图片加载完成reader.onload = function(){img.src = reader.result;}
}
</script>

js 点击文本框，预览选择图片相关推荐

html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
JQ input 文件上传并预览选择图片后,在页面上预览图片,页面渲染
有时候,我们更新界面信息时会遇到,选择图片后,并不能预览图片,必须提交数据库后才能在页面上显示出来,这样我们该怎样办呢? 起始jq为我们提供了两个方法change()和URL.createObject ...
点击编辑框全选内容java,js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候, ...
php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）
maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!).. 源码下载:http://download. ...
js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...
jQuery实现点击文本框弹出热门标签的提示示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
点击文本框弹出热门标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...

js 点击文本框，预览选择图片

js 点击文本框，预览选择图片相关推荐

最新文章

热门文章