html file控件选择文件后立即预览 js实现
//上传图片后立即预览 file对象,图片容器id
function showImg(fileObj,imgId) { var file=fileObj.files[0];
var r = new FileReader();
r.readAsDataURL(file);
$(r).load(function() {
$('#'+imgId).attr("src", this.result);
}) }
<input type="file" onchange="showImg(this,'img')" accept="image/gif" />
通过accept限制文件类型 通过file.size验证文件大小 file.szie是以字节为单位
html file控件选择文件后立即预览 js实现的更多相关文章
- File控件选择图片的时候在Html5下马上预览
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...
- file控件选择同一文件不触发change事件和img控件不改变src的情况下图片不刷新问题解决
最近跑来前端掺和了.. file控件的问题用 inputFile.value = ''; img控件的问题,在图片后面添加一串无意义的参数即可,例如: img.src = 'file:///' + 本 ...
- 怎么清除file控件的文件路径
还记得上次做一个文件上传,后来测试告诉我说,如果我要是不选择文件了呢?该怎么办?我说:简单啊,做一个取消按钮不就完事了吗!然后我就想一个file空间做一个取消是多么简单的事,用js处理可是想怎么样就怎 ...
- MFC 使用MFC EditBrowse Control控件选择文件或者文件夹
从工具箱中拖拽一个MFC EditBrowse Control到窗体中, 通过设置“Browse Mode”属性指定“文件浏览”还是“文件夹浏览” 可以通过添加对象的方式将其与一个CString se ...
- file控件选择图片,img即可显示(无需上传)
代码如下: <script> $(function() { $("#Book_Fiel").change(function() { var $file = $(this ...
- IE9获取file控件的本地文件路径
最近发现,在IE9下,公司网站的本地图片预览都无法正常显示,经过测试发现,原因在于IE9下无法获取file控件的文件路径. 以前的代码如下: var strPic = fileImg.value; i ...
- UploadFile控件,提交图片后,页面预览显示刚刚提交的图片
最近在用asp.net来写一个新闻系统后台,然后由于不用用网上的flash插件来上传图片什么的,我就用asp.net的控件来写,但是控件总归有一些用的不够灵活的地方.这次测试提出,文章在修改的时候,需 ...
- File控件杂谈
我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...
- 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件
使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...
随机推荐
- php开发api接口
做过 API 的人应该了解,其实开发 API 比开发 WEB 更简洁,但可能逻辑更复杂,因为 API 其实就是数据输出,不用呈现页面,所以也就不存在 MVC(API 只有 M 和 C),那么我们来探讨 ...
- android学习笔记55——ContentProvider_2
实现ContentProvider 创建ContentProvider的步骤: 1.开发一个ContentProvider的子类,该子类需要实现增.删.改.查等方法: 2.在AndroidMainfe ...
- Perl删除数组中元素的多种方法
Perl中的数组元素起始引用序号为0,@array的第一个元素为$array[0],依次递增,最后一个元素为$array[-1]或者$#array.如果要删除一个数组中已有的元素,可以用以下几个函数来 ...
- Hadoop I/O操作原理整理
I/O操作中的数据检查 校验和方式是检查数据完整性的重要方式.一般会通过对比新旧校验和来确定数据情况,如果两者不同则说明数据已经损坏.比如,在传输数据前生成了一个校验和,将数据传输到目的主机时再次计算 ...
- div 居中
Found another solution: Just add position: relative; top: 50%; transform: translateY(-50%); to the i ...
- MySQL中四舍五入的实现
MySQL四舍五入的实现 文章主要描述的是MySQL四舍五入的实际应用, 以及在其实际操作中的值得我们大家注意的事项与其实际应用代码的描述,以下就是文章的主要内容的详细描述,望大家在浏览之后会对其 ...
- Spark SQL External Data Sources JDBC官方实现写测试
通过Spark SQL External Data Sources JDBC实现将RDD的数据写入到MySQL数据库中. jdbc.scala重要API介绍: /** * Save this RDD ...
- set JAVA_HOME in RHEL/CentOS
3.3. Install OpenJDK on Red Hat Enterprise Linux Introduction OpenJDK is one of many Java Developmen ...
- cocos2d-x + Lua接入iOS原生SDK的实现方案[转]
相信很多朋友在使用cocos2d-x+lua开发游戏时都遇到过接入iOS原生SDK的问题,比如常见的接应用内支付SDK,广告SDK或是一些社交平台SDK等等,我也没少接过这类SDK.这篇文章主要是对我 ...
- MC3190终端配置冷启动自动恢复的方法
一. 网络配置的恢复 将当前文件夹下的注册表文件MC3190 Start Config.reg(见附件)复制到终端的Application文件夹内(可以通过数据线或ftp方式传送文件); 导出终端的网 ...