文档章节

Javascript/js兼容各个浏览器的本地图片上传即时预览效果

coord
 coord
发布于 2016/06/14 16:18
字数 263
阅读 104
收藏 2

 

function change() {
        var pic = document.getElementById("preview");
        var file = document.getElementById("f");
		var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
		// gif在IE浏览器暂时无法显示
		if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
			alert("文件必须为图片!"); return;
		}
		// IE浏览器
        if (document.all) {

            file.select();
            var reallocalpath = document.selection.createRange().text;
			var ie6 = /msie 6/i.test(navigator.userAgent);
			// IE6浏览器设置img的src为本地路径可以直接显示图片
            if (ie6) 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);
		}
    }

	function html5Reader(file){ 
		var file = file.files[0]; 
		var reader = new FileReader(); 
		reader.readAsDataURL(file); 
		reader.onload = function(e){ 
			var pic = document.getElementById("preview");
			pic.src=this.result;
		} 
	}

 

html

<form enctype="multipart/form-data" name="form1">
上传文件:<input id="f" type="file" name="f" onchange="change()" />

预览:<img id="preview" alt="" name="pic" />
</form>

本文转载自:https://www.markdream.com/technologies/programs/image-preview.shtml

共有 人打赏支持
coord
粉丝 2
博文 52
码字总数 10879
作品 0
闵行
程序员
推荐轻量高效无依赖的开源JS插件和库

在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js - 是一个功能齐全的JavaScript图像灯箱插件。demo viewerjs - 是一个图...

小弟调调™
2016/11/30
0
0
12 个开发人员的实用代码编辑器

Compilr Compilr 是一个在线的集成开发怀集(IDE),目前支持9种编程语言:C、C++、C#、Java、JavaScript、PHP、Python、Ruby 和 Visual Basic。 Compilr 由坐落于加拿大新斯科舍省的 Ninja ...

ChildhoodAndy
2012/12/28
0
1
Jquery常用插件及功能片段

返回顶部 解决手机浏览器bfcache导致的后腿页面js不执行 60S倒计时 禁止浏览器后退 飘入动画 滚动底部加载更多评价 Jquery.clone修复 修复部分浏览器在jquery.clone时 textarea 和 select 标...

麦拂沙
2015/11/03
0
0
PHPCMS_整合UEditor编辑器

①先到官网下载资源包(先定制编辑器导航工具,再下载) ②上传到phpcms默认的js文件路径,上传后的文件路径如下 staticsjsueditor ②打开/phpcms/libs/classes/form.class.php,找到如下代码...

喵王不瞌睡
2014/03/07
0
0
INPUT[type=file] 的 'value' 属性值在各浏览器中存在差异

标准参考 当一个 INPUT 元素的 'type' 属性值设置为 'file' 时创建了一个文件选择控件(file select),其中 INPUT 元素的 'value' 属性值便是文件的初始名称。 另外,在 IE6 和 IE7 下通过此方...

zkool
2012/06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Web系统大规模并发:电商秒杀与抢购

一、大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战。如果Web系统不做针对性的优化,会轻而易举地陷入到异常...

xtof
今天
2
0
代码质量管理平台-sonarqube

在工作中,往往开发的时候会不怎么注重代码质量的人很多,存在着很多的漏洞和隐患等问题,sonarqube可以进行代码质量的审核,而且十分的残酷。。。。。接下来我们说下怎么安装 进入官网下载:...

落叶清风
今天
7
0
在Ubuntu安装和配置Sphinx

Ubuntu系统默认是配置有sphinx的,先检查一下,别多此一举。。。。。 在开始本指南之前,您需要: 一个Ubuntu 16.04服务器。 sudo的一个非root用户,您可以通过以下设置本教程 。 安装在服务...

阿锋zxf
今天
1
0
Qt编写输入法V2018超级终结版

对于qt嵌入式linux开发人员来说,输入法一直是个鸡肋问题,要么不支持实体键盘同步,要么不能汉字输入,要么不支持网页输入等,这几年通过陆续接触大量的各种输入法应用场景客户,得到真实需...

飞扬青云
今天
2
0
TypeScript基础入门之高级类型的多态的 this类型

转发 TypeScript基础入门之高级类型的多态的 this类型 高级类型 多态的this类型 多态的this类型表示的是某个包含类或接口的子类型。 这被称做F-bounded多态性。 它能很容易的表现连贯接口间的...

durban
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部