js 点击文本框,预览选择图片
博客已迁移到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 点击文本框,预览选择图片的更多相关文章
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- Easyui datebox单击文本框显示日期选择
Easyui默认是点击文本框后面的图标显示日期,为了更进一步优化体验 修改为单击文本框显示日期选择框 修改jquery.easyui.min.js(作者用的是1.3.6版本,其他版本或有区别) 可 c ...
- Easyui datebox单击文本框显示日期选择 eayui版本1.5.4.1
Easyui默认是点击文本框后面的图标显示日期,体验很不好,所以我想单击文本框就显示日期选择框,网上很多版本是1.3,1.4的,于是自己就比葫芦画瓢改了一个1.5.4.1的版本. 我参考了网上这个帖子 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- jquery ui autocomplete 实现点击文本框,出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jquery easyui datebox单击文本框显示日期选择
jquery easyui的datebox日历控件,实现单击文本框出现日历选择,如下图: 代码: 修改jquery.easyui.min.js第9797行函数(jQuery EasyUI 1.3.2) ...
- 基于Three.js的360X180度全景图预览插件
基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10 HTML5中国 原文 http://www.html5cn.org/article-8621-1 ...
- js 判断一个文本框是否获得焦点
1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素 // 查找你要判断的文本框 ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
随机推荐
- 2018/9/6 spring框架的整理
spring知识的巩固整理AOP和ioc概念,以及了解到了为何要使用spring框架的目的,作用:变换资源获取的方向.更像是按需所求.配置bean的方式:利用XML的方式,基于注解的方式两种.1通过全 ...
- kaldi运行thchs30例子
首先,thchs30有两种数据库,kaldi运行的数据库最好是 thchs30-openslr. 修改run.sh里面的语音库路径 thchs30=... 修改nj线程数 等于CPU的核心数 修改c ...
- Javascript高级编程学习笔记(35)—— DOM(1)节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- Ubuntu18.04搭建nodejs环境
首先安装sudo apt install curl 然后安装命令(当前最新版本是0.33.2,最新版本可以在https://github.com/creationix/nvm查看): curl -o- ...
- mfcc的特征提取python 代码实现和解析
#!/usr/bin/python # -*- coding: UTF-8 -*- import numpy import scipy.io.wavfile from matplotlib impor ...
- 使用 IdentityServer4 实现 OAuth 2.0 与 OpenID Connect 服务
IdentityServer4 是 ASP.NET Core 的一个包含 OIDC 和 OAuth 2.0 协议的框架.最近的关注点在 ABP 上,默认 ABP 也集成 IdentityServer4 ...
- mysql 开发进阶篇系列 3 SQL 优化(索引使用方法)
一. 本章介绍mysql中的索引的分类,存储,使用方法的介绍 1. 索引的存储分类 MyISAM存储引擎的表的数据和索引是自动分开存储的,各自是独立的一个文件, innodb 存储引擎的表的数据和索 ...
- R语言命令汇总
> qqplot(spear,fastrankweight)> qqplot(spear,fastrankweight,main="title")> qqplot ...
- [转]java中作用域public private protected 以及不写的区别
在说明这四个关键字之前,我想就class之间的关系做一个简单的定义,对于继承自己的class,base class可以认为他们都是自己的子女,而对于和自己一个目录下的classes,认为都是自己的朋友 ...
- 【原创】驱动加载之OpenSCManager
SC_HANDLE WINAPI OpenSCManager( _In_opt_ LPCTSTR lpMachineName, _In_opt_ LPCTSTR lpDatabaseName, _In ...