博客已迁移到CSDN《https://blog.csdn.net/qq_33375499

  点击文件选择框,选择图片文件,通过FileReader对象,读取图片文件中的内容,存放于result中,具体代码如下

 <input type="file" onchange="fileReader(this)" />
<div id="d">
<img id="img" src="" />
</div>
 <script type="text/javascript">
function fileReader(obj){
var file = obj.files;
var img = document.getElementById("img");
var reader = new FileReader();// 操作图片
if(/image/.test(file[0].type)){
reader.readAsDataURL(file[0]);
}else {
alert('请选择图片!');
obj.value = "";
return;
}
// 图片加载错误
reader.onerror = function(){
document.write("图片加载错误");
}
// 图片加载完成
reader.onload = function(){
img.src = reader.result;
}
}
</script>

js 点击文本框,预览选择图片的更多相关文章

  1. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  2. Easyui datebox单击文本框显示日期选择

    Easyui默认是点击文本框后面的图标显示日期,为了更进一步优化体验 修改为单击文本框显示日期选择框 修改jquery.easyui.min.js(作者用的是1.3.6版本,其他版本或有区别) 可 c ...

  3. Easyui datebox单击文本框显示日期选择 eayui版本1.5.4.1

    Easyui默认是点击文本框后面的图标显示日期,体验很不好,所以我想单击文本框就显示日期选择框,网上很多版本是1.3,1.4的,于是自己就比葫芦画瓢改了一个1.5.4.1的版本. 我参考了网上这个帖子 ...

  4. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  5. jquery ui autocomplete 实现点击文本框,出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  6. jquery easyui datebox单击文本框显示日期选择

    jquery easyui的datebox日历控件,实现单击文本框出现日历选择,如下图: 代码: 修改jquery.easyui.min.js第9797行函数(jQuery EasyUI 1.3.2) ...

  7. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  8. js 判断一个文本框是否获得焦点

    1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素   // 查找你要判断的文本框 ...

  9. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

随机推荐

  1. selenium+phantomjs+pyquery 爬取淘宝商品信息

    from selenium import webdriver from selenium.common.exceptions import TimeoutException from selenium ...

  2. tcp/ip 三次握手和4次挥手

    TCP连接两个端口,谁也发起请求,谁就是client端A,另外一个接受请求的server端B.第一次握手:A向B发一个链接请求,带一个seq = x,SYN= x. 第二次握手:B收到链接请求之后向A ...

  3. ZKWeb网页框架2.2正式发布

    2.2.0更新的内容有 重构依赖注入容器 使用无锁算法 (可能导致不兼容) 使用 ContainerFactoryData 创建实例 (可能导致不兼容) 删除静态的 ContainerFactoryC ...

  4. Javascript高级编程学习笔记(16)—— 引用类型(5) Function类型

    JS中许多有趣的地方都和函数脱不了联系 那么是什么让JS中的函数这么有趣呢? 我们一起来看看吧 Function类型 在JS中函数实际上就是对象,每个函数都是Function类型的实例,和JS的其他引 ...

  5. 第48节:Java当中的集合框架

    Java当中的集合框架 01 在我们班里有50位同学,就有50位对象. // 简书作者:达叔小生 Student[] stus = new Student[20]; 结果来了一位插班生,该同学因为觉得 ...

  6. Kubenetes 核心概念理解

    Kubernetes 是一个具有自动控制 .自动纠错功能的资源管理系统 可以把 Node , Pod , Replication Controller , Service 等都看做是一种 " ...

  7. ubuntu下opencv的版本切换及遇到的问题解决

    默认使用opencv 3.2的时候,使用SVM的时候,系统报错如下: error: ‘class MySVM’ has no member named ‘decision_func’ 解决方法:要把系 ...

  8. 安卓网络访问(xUtils3)

    xUtils3是安卓网络访问的重要库,基本上的网络请求所涉及的内容都有集成.笔者将实现xUtils3的简单使用,包括简单GET和POST请求.文件上传.文件下载.图片显示. 其主要特性有以下几点: ① ...

  9. 使用C# (.NET Core) 实现迭代器设计模式 (Iterator Pattern)

    本文的概念来自深入浅出设计模式一书 项目需求 有两个饭店合并了, 它们各自有自己的菜单. 饭店合并之后要保留这两份菜单. 这两个菜单是这样的: 菜单项MenuItem的代码是这样的: 最初我们是这样设 ...

  10. IdentityServer Resource Owner Password

    Resource Owner Password 模式需要自己实现用户名密码的校验 新增ResourceOwnerPasswordValidator实现IResourceOwnerPasswordVal ...