//上传图片后立即预览 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. PNG格式小图标的CSS任意颜色赋色技术

    一.眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,我们随意选 ...

  2. < 独立项目 - 文本挖掘 > - 2016/10/25 第一更 - <Linux相关知识准备>

    < 独立项目 -  文本挖掘 > 项目立项的相关背景介绍,TODO方向. 一.Ubuntu环境配置 主机系统:Windows 7 SP1  64位操作系统 | i5-4210 CPU | ...

  3. js json排序

    var p = [             {name:"kitty", age:12},             {name:"sonny", age:9}, ...

  4. Hadoop学习13--zookeeper相关

    zookeeper要保证各个server之间同步,实现同步的协议是zab协议.此协议有两种模式:恢复模式(选主)和广播模式(同步). 服务启动或者leader崩溃时,进入恢复模式.选举成功且大多数se ...

  5. JAVA_Java中关于supper和this的理解

    2015-04-04 Created By BaoXinjian

  6. java io流 数据流传输

    java io流 数据流传输 把这段当公式用就可以了 //数据流传输 import java.io.*; public class Index{ public static void main(Str ...

  7. java 线程的堵塞

    //线程的阻塞 // //线程 class xc1 implements Runnable{ public void run(){ for(int i=1;i<=30;i++){ System. ...

  8. No.2__C#

    几经波折——多事之秋的第二周 这周的事情还有点多, 应该已经是上周了确切的说.总的来说,上周的数据结构的学习进行的很顺利.最让自己惊喜的是,居然很快就派上了用场,这也坚定了我学习的信念,极大地鼓舞了我 ...

  9. ios 屏幕概况

    转:http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

  10. VBS数组

    定义一个数组: dim a(3).这里要注意在VBS里面数组不像其他的例如C,C#,JAVA等数组用[]作为数组标志.VBS采用的是().还需要注意的是,这里定义的数组包含a(0),a(1),a(2) ...