//上传图片后立即预览 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. [翻译] WCF运行时架构

    原文地址 http://www.cnblogs.com/idior/articles/971252.html 介绍 WCF具有非常易用的编程模型,服务开发者在掌握ABC的概念后可以很容易的使用WCF去 ...

  2. 【C】 05 - 声明和定义

    仅从形式上看,C程序就是由各种声明和定义组成的.它们是程序的骨架和外表,不仅定义了数据(变量),还定义了行为(函数).规范中的纯语言部分,声明和定义亦花去了最多的篇幅.完全说清定义的语法比较困难,这里 ...

  3. 微信公众平台开发教程(十一)微信"企业号“上线

    什么是企业号? 企业号是微信为企业客户提供的移动应用入口 关注更安全 只有企业通讯录的成员才能关注企业号,分级管理员.保密消息等各种特性确保企业内部信息的安全. 应用可配置 企业可自行在企业号中可配置 ...

  4. datalist的用法

    DataList 提供相关的编辑模板,但和DataGrid不一样的是,DataList没有编辑按钮.要在DataList中使用编辑功能,可在项模板中增加一个按 钮,Linkbutton和Button都 ...

  5. Struts2对Ognl的支持

                                                      Struts2对Ognl的支持 一. 写作背景 由于工作性质的变化,最近一直在研究struts2,从 ...

  6. Access使用参数化UPDATE数据时,数据无法更新的问题

    今天update access数据库时,使用了参数化的方式,结果不报错,但是数据也没有更新.经过google发现access使用参数化时,参数位置必须和赋值顺序相同才行,否则更新时就会出现数据无法更新 ...

  7. UVA 11082 矩阵解压(网络流建模)

    矩阵解压 紫书P374 建模真的是挺难的,如果直接给我这题,我是想不到用网络流的,所以还应多做网路流建模,学会如何转化成网络流 还有,现在用的EK算法是比较慢的,还应去看看Dnic和ISAP,并且理解 ...

  8. bootstrap-面包屑和分页

    <div class="container"> <div class="row"> <ul class="breadcr ...

  9. less笔记

    koala工具 注释:    1./**/,可以被编译    2.//,不可以被编译 申明变量:    @box_width:300px;    .box{        width:@box_wid ...

  10. Aquarium Cycling

    http://www.fishyou.com/aquarium-cycling.php Aquarium Cycling Aquarium cycling actually refers to the ...