html上传预览图片原理,关于html中图片上传预览的实现

functionchange() {varpic=document.getElementById("preview"),

file=document.getElementById("f");//得到后缀名

varext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//gif在IE浏览器暂时无法显示

if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){

alert("图片的格式必须为png或者jpg或者jpeg格式!");return;

}varisIE=navigator.userAgent.match(/MSIE/)!= null,

isIE6=navigator.userAgent.match(/MSIE 6.0/)!= null;

if(isIE) {

file.select();

var reallocalpath = document.selection.createRange().text;

// IE6浏览器设置img的src为本地路径可以直接显示图片

if (isIE6) {

pic.src = reallocalpath;

}else {

// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现

pic.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" +reallocalpath+ "")";//设置img的src为base64编码的透明图片 取消显示浏览器默认图片

pic.src= 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

}

}else{

html5Reader(file);

}

}functionhtml5Reader(file){varfile=file.files[0];varreader= newFileReader();

reader.readAsDataURL(file);

reader.οnlοad= function(e){varpic=document.getElementById("preview");

pic.src=this.result;

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

程序员成功之路

程序员成功之路 ——The road ahead for programmer(演讲稿) 一、我很羡慕在座的各位同学,因为你们是中国未来的程序员,而我不是,我一直很遗憾。 比尔盖茨曾经写过一本书叫做《未来之路》The road ahead, 那么今天我选…

【温故知新】——原生js中常用的四种循环方式

一、引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临”在网页中弹出框输入1 网页输出“查询中……”在网页中弹出框输入2 网页输出“取款中……”在…

部署egg需要用到pm2吗_使用宝塔面板部署校园综合服务平台项目

本文档为校园综合服务平台服务端的安装部署教程,欢迎star小程序端下载地址:https://github.com/landalfYao/help.git后台服务端下载地址:https://github.com/landalfYao/helpserver.git后台客户端下载地址:https://github.com/lan…

机器学习算法之线性回归

一、什么是回归算法 回归算法是一种有监督算法 回归算法是一种比较常用的机器学习算法,用来建立“解释”变量(自变量X)和观测值(因变量Y)之间的关系;从机器学习的角度来讲,用于构建一个算法模型(函数)来做属性(X)与标签(Y)之间的映射关系&a…

html中怎么写多选框,如何在HTML中实现“选择所有”复选框?

checkboxes document.getElementsByName(foo);for(var checkbox in checkboxes)checkbox.checked source.checked;} Toggle AllBar 1 Bar 2Bar 3 Bar 4最新情况:这个for each...in构造在Safari 5或Chrome 5中似乎不起作用,至少在本例中是这样的。这段代…

Console-算法[for]-国王与老人的六十四格

ylbtech-Arithmetic:Console-算法[for]-国王与老人的六十四格1.A,案例-- -- ylb:算法-- Type:算法[for]-- munu:国王与老人的六十四格-- 20:32 2012/3/16-- 案例:印度有个国王,他拥有超人的权力和巨大的财富。但权力和财富最终让他…

程序人生感悟

<本来不想写的&#xff0c;实在不想看到某些人误人子弟&#xff0c;混淆视听&#xff0c;耽误了中国IT的未来&#xff0c;所以一吐为快) 一些人总是发出一些错误的声音&#xff0c;形成了劣胜优汰可怕的现象。他们在误导着中国&#xff0c;把我们的后继军训练成软件蓝领―…

python的excel库_Python-Excel 模块哪家强?

0. 前言 从网页爬下来的大量数据需要清洗&#xff1f; 成堆的科学实验数据需要导入 Excel 进行分析&#xff1f; 有成堆的表格等待统计&#xff1f; 作为人生苦短的 Python 程序员&#xff0c;该如何优雅地操作 Excel&#xff1f; 得益于前人的辛勤劳作&#xff0c;Python 处理…

html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理

滚轮事件是不同浏览器会有一点点区别&#xff0c;一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件&#xff0c;其他的浏览器滚轮事件使用mousewheel&#xff0c;下面我来给大家具体介绍。Firefox使用DOMMouseScroll&#xff0c;其他…

在OOW2009上寻宝撞大运续(床上篇)

历时5天的Oracle Open World 2009终于&#xff0c;终于结束了。今天最后的节目是去听一场金融分析师的会议&#xff0c;“只”开了不到6个钟。去的时候是毛毛雨&#xff0c;回来的时候终于看到了一缕阳光。说夕阳无限好不大合适。用Larry Ellison的说法是“太阳落下的地方也是太…

skynet记录6:定时器

稍后填坑 kernel中&#xff0c;每一次时钟中断会trap到kernel code&#xff0c;这个时间间隔称之为jiffies&#xff0c;每秒钟发生的次数为HZ 如果是4核&#xff0c;分配到每个核就是HZ/4 cat /boot/config-uname -r | grep ^CONFIG_HZ 输出&#xff1a; CONFIG_HZ250 cat /pro…

html图片平铺不重复整个页面,JSP网页背景图片怎样不平铺,不重复出现啊...

2016-07-10 13:12最佳答案1,Q:怎样把别人网页上的背景音乐保存下来?A:浏览该网页后,在你的 Windows\Temporary Internet Files 文件夹下可以找到该背景音乐的缓存文件&#xff0c;拷贝出来即可使用。如果还是找不见该文件&#xff0c;可以打开网页的源文件&#xff0c;找到音乐…

特征图注意力_从数据结构到算法:图网络方法初探

作者 | 朱梓豪来源 | 机器之心原文 | 从数据结构到算法&#xff1a;图网络方法初探如果说 2019 年机器学习领域什么方向最火&#xff0c;那么必然有图神经网络的一席之地。其实早在很多年前&#xff0c;图神经网络就以图嵌入、图表示学习、网络嵌入等别名呈现出来&#xff0c;其…

FFMPEG 源码分析

FFMPEG基本概念&#xff1a; ffmpeg是一个开源的编解码框架&#xff0c;它提供了一个音视频录制&#xff0c;解码和编码库。FFMPEG是在linux下开发的&#xff0c;但也有windows下的编译版本。 ffmpeg项目由以下几部分组成: ffmpeg 视频文件转换命令行工具,也支持经过实时电视…

面试之 Redis汇总

简介 Redis 持久化机制 RDB&#xff08;Redis DataBase&#xff09; AOF&#xff08;Append-only file&#xff09; Redis 4.0 对于持久化机制的优化 补充&#xff1a;AOF 重写 二者的区别 二者优缺点 Memcache与Redis的区别都有哪些&#xff1f; 缓存雪崩、缓存穿透、…

Oracle 10g 问题集锦

监听服务中Oracle数据库之中使用最主要的一个服务&#xff0c;但是这个服务经常会出现错误&#xff0c;包括以后在工作之中此服务也会出现错误&#xff0c;故给出两种常见错误的解决方案&#xff08;故障1、故障2&#xff09; 故障1: 注册表使用了优化软件&#xff08;如&#…

iOS linker command failed with exit code 1 (use -v to see invocation)多种解决方案汇总

有时可能会遇到这种错误&#xff0c;关键是这种错误&#xff0c;有时只有这一句话&#xff0c;也不会给更多错误信息。 网上找了一些&#xff0c;总结了如下&#xff1a;&#xff08;PS&#xff1a;以下是按照解决简易程度排序&#xff0c;不代表出现概率&#xff09; 1、bitco…

计算机二级python选择题题库_2018年计算机二级python题库精编(1)

1正则中的^符号&#xff0c;用在一对中括号中则表示要匹配() A.字符串的开始 B.除中括号内的其它字符 C.字符串的结束 D.仅中括号内含有的字符 2静态成员变量称为类变量&#xff0c;非静态成员变量称为实例变量&#xff0c;下列关于一个类的静态成员的描述中&#xff0c;不正确…

非常好用!世界上最快最好的视频压缩转换工具(精品)

测试了20多款 各种视频压缩 截取软件 真的是这款最快 快好用 效果也好&#xff01;&#xff01;&#xff01; 最快的视频转换压缩工具。 WisMencoder 能够把您的电脑上的所有视频格式&#xff0c;包括avi,mpg,rmvb,wmv,mp4,mov,dat等格式以最快的速度和最高的质量转换为…

面试之 Mysql 汇总

事务相关 什么是事务&#xff1f; 事务&#xff1a;是由一组SQL语句组成的逻辑处理单元&#xff0c;事务具有以下4个属性&#xff0c;通常简称为事务。事务的ACID属性&#xff1a; &#xff08;1&#xff09;原子性&#xff08;Atomicity&#xff09;&#xff1a;   事务是一…