//上传图片后立即预览 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实现的更多相关文章

  1. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  2. file控件选择同一文件不触发change事件和img控件不改变src的情况下图片不刷新问题解决

    最近跑来前端掺和了.. file控件的问题用 inputFile.value = ''; img控件的问题,在图片后面添加一串无意义的参数即可,例如: img.src = 'file:///' + 本 ...

  3. 怎么清除file控件的文件路径

    还记得上次做一个文件上传,后来测试告诉我说,如果我要是不选择文件了呢?该怎么办?我说:简单啊,做一个取消按钮不就完事了吗!然后我就想一个file空间做一个取消是多么简单的事,用js处理可是想怎么样就怎 ...

  4. MFC 使用MFC EditBrowse Control控件选择文件或者文件夹

    从工具箱中拖拽一个MFC EditBrowse Control到窗体中, 通过设置“Browse Mode”属性指定“文件浏览”还是“文件夹浏览” 可以通过添加对象的方式将其与一个CString se ...

  5. file控件选择图片,img即可显示(无需上传)

    代码如下: <script> $(function() { $("#Book_Fiel").change(function() { var $file = $(this ...

  6. IE9获取file控件的本地文件路径

    最近发现,在IE9下,公司网站的本地图片预览都无法正常显示,经过测试发现,原因在于IE9下无法获取file控件的文件路径. 以前的代码如下: var strPic = fileImg.value; i ...

  7. UploadFile控件,提交图片后,页面预览显示刚刚提交的图片

    最近在用asp.net来写一个新闻系统后台,然后由于不用用网上的flash插件来上传图片什么的,我就用asp.net的控件来写,但是控件总归有一些用的不够灵活的地方.这次测试提出,文章在修改的时候,需 ...

  8. File控件杂谈

    我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...

  9. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

随机推荐

  1. C# :GDI+技术生成复杂型彩色验证码(转载)

    该类是生成一个验证码的类,集合了网上大部分的C#关于GDI+的文章进行多次改进,现在已经形成了可在生产环节中使用的验证码. 该验证码加入了背景噪点,背景噪点曲线和直线,背景噪点文字以及扭曲,调暗,模糊 ...

  2. LeetCode Potential Thought Pitfalls

    Problem Reason Reference Moving ZeroesSort Colors Corner cases   Shortest Word Distance Thought: 2 p ...

  3. Redis介绍以及安装(Linux)

    Redis介绍以及安装(Linux) redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了memcached的不足,它支持存储的 ...

  4. XMPP协议错误码

    302 重定向 尽管HTTP规定中包含八种不同代码来表示重定向,Jabber只用了其中一个(用来代替所有的重定向错误).不过Jabber代码302是为以后的功能预留的,目前还没有用到 400 坏请求  ...

  5. 性能测试框架Locust初学笔记

    Locust初探 Locust是一款类似于Jmeter开源负载测试工具,所不同的是它是用python实现,并支持python脚本. locust提供web ui界面,能够方便用户实时监控脚本运行状态. ...

  6. link

    public IEnumerable InsuranceSearch(InsuranceSC sc, out int TotalCount) { var data = from q in Insura ...

  7. 仿淘宝详情转场(iOS,安卓没有这功能)

    由于公司是做跨境电商的,所以对各大电商APP都有关注,最近看到淘宝iOS端(安卓没有)在商品详情点击加入购物车有一个动画效果特别赞,正好今天新版本上线,下午就抽了些时间研究了下. 主要思路是自定义转场 ...

  8. JS宝典

    hammerjs 终止事件流 window.event.returnValue = false; return false; 页面显示调用方法.类似viewWillApper IOS和android表 ...

  9. MFC的自定义消息的定义与使用

    自定义消息的响应和资源消息的响应有很多类似之处:资源消息的响应是以资源的ID号作为标识的:自定义的消息要自己声明消息ID. 一.           定义: 第一步要声明消息: #define WM_ ...

  10. 【转载】Fast Inserts to PostgreSQL with JDBC and COPY FROM

    source: http://rostislav-matl.blogspot.com/2011/08/fast-inserts-to-postgresql-with-jdbc.html Thanks ...