//上传图片后立即预览 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. api接口签名验证(MD5)

    不要急,源代码分享在最底部,先问大家一个问题,你在写开放的API接口时是如何保证数据的安全性的?先来看看有哪些安全性问题在开放的api接口中,我们通过http Post或者Get方式请求服务器的时候, ...

  2. SQL总结(五)存储过程

    SQL总结(五)存储过程 概念 存储过程(Stored Procedure):已预编译为一个可执行过程的一个或多个SQL语句. 创建存储过程语法 CREATE proc | procedure pro ...

  3. Intel DPDK的一些参资料

    dpdk.org What it is Intel® DPDK is a set of libraries and drivers for fast packet processing on x86 ...

  4. shell 脚本定时创建月份表

    #!/bin/shuser='root'pass='root'name='vfc_sport' # 数据表名定义timestamp=`date -d "next month" +% ...

  5. Mysql 自定义HASH索引带来的巨大性能提升----[真相篇]

    推倒重来 俗话说no zuo no die why you try,这时候我又忍不住zuo了,吭哧吭哧的把解决过程发上博客,向全世界宣布,哥又搞定个难题. 剧情的发展往往是看起来主角完全掌握了局势的情 ...

  6. Asp.net中WebForm 与 MVC的架构区别

    ASP.NET Webform 后台代码(behind code) 这种behind code 模式有5个问题,我们用MVC的设计思想来分别解决这些问题 1.基于视图的方案来解决基于行为的需求 从上图 ...

  7. CPS冥想 - 1 重新审视CPS

    这篇文章是在阅读Eric Lippert大神的MSDN Blog文章时同步写成的,其中主要是各种翻译,同时还混杂自己阅读文章的笔记和感想. 原博文地址 http://blogs.msdn.com/b/ ...

  8. WebService---Android中访问WebService接口的方法

     最近公司有个项目需要从Android平台访问WebService接口,实现向发布的函数传递对象.在网上找了一些资料,发现使用ksoap2可以调用WebService传递对象.   需要引入ksoap ...

  9. Jmeter安装

    安装下载方法:http://www.jb51.net/softjc/266834.html 下载地址:http://jmeter.apache.org/download_jmeter.cgi Wind ...

  10. Windows、VS 与 .net

    原文地址:https://msdn.microsoft.com/en-us/library/bb822049(v=vs.110).aspx .NET Framework version CLR ver ...