博客已迁移到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. RabbitMQ 适用于云计算集群的远程调用(RPC)

    在云计算环境中,很多时候需要用它其他机器的计算资源,我们有可能会在接收到Message进行处理时,会把一部分计算任务分配到其他节点来完成.那么,RabbitMQ如何使用RPC呢?在本篇文章中,我们将会 ...

  2. html5之上的图片处理

    在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 像我这么为用户着想的程序员,绝对不会让这种事情发生的, ...

  3. 当GDPR来敲门,中国互联网企业该如何应对?

    本文来自 网易云社区 . 欧盟<通用数据保护条例>(General Data Protection Regulation,GDPR)已于2018年5月25日正式生效,谷歌.Facebook ...

  4. VSCode插件开发全攻略(六)开发调试技巧

    更多文章请戳VSCode插件开发全攻略系列目录导航. 前言 在介绍完一些比较简单的内容点之后,我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧,特别是后面一章节将要介绍WebView的知识 ...

  5. .Net持续集成 —— Jenkins+Git+WebDeploy

    由于某些历史问题,最近终于可以从java中解脱出来,继续耕耘.Net了,第一步就是把之前的java项目翻成.net.之前已经实现过一次,翻起来还是比较快的(当然基础架构/实体模型已经重新思考并改进), ...

  6. Git使用详细教程(3):git add, git commit详解

    在使用git之前,我们首先要初始化一个git管理的仓库,这里以博客(blog)为例 git init blog 我们进入目录,执行git status查看git状态,可以看到一个新的git管理的项目目 ...

  7. [Swift]在Swift项目中创建桥接头文件,Swift文件和Objective-C文件相互调用

    创建一个Swift项目[demo],以下内容Swift文件和Objective-C文件相互调用都是在Swift项目中. 一.Swift文件调用Objective-C文件 新建文件夹[SupportFi ...

  8. MRO

    在Python3里面,有多继承的时候,往往会出现调用Super失败的情况.Python里存在一种多继承 Super的调用顺序(C3算法),保证每个类调用一次. 体现:类名.__mro__ 使用Supe ...

  9. Xamarin.Android ImageView 图片圆角显示

    第一步:在 values 文件夹下新增 Attrs.xml 文件 <?xml version="1.0" encoding="utf-8" ?> & ...

  10. SpringBoot 常用注解

    @SpringBootApplication  这个配置等同于:@Configuration ,@EnableAutoConfiguration 和 @ComponentScan 三个配置. @Ena ...