文档章节

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

coord
 coord
发布于 2016/06/14 16:18
字数 263
阅读 122
收藏 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
粉丝 3
博文 59
码字总数 13331
作品 0
闵行
程序员
私信 提问
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0
推荐轻量高效无依赖的开源JS插件和库

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

小弟调调™
2018/10/29
0
0
关于RunJS你不知道的几个事情

关于RunJS,一直没有一个好的教程或者文档来说明怎么使用,当然基本的使用就是编辑html、css、js代码并发布分享了。这里我要列出一些关于RunJS你不知道的几个tip。 收起左边栏:大家可以点击...

王振威
2012/11/12
5.2K
10
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
OSChina 在线工具 RunJS 上线,让 JS 飞一会儿!

RunJS 是一个在线编辑、保存、分享 HTML、CSS、JavaScript 代码的平台,拥有实时预览、分享、Fork等多种特性。 体验地址:http://runjs.cn 特性一览: 代码编辑:提供 HTML、CSS、JS 三种常见...

王振威
2012/10/30
13.5K
155

没有更多内容

加载失败,请刷新页面

加载更多

Handler简解

Handler 这里简化一下代码 以便理解 Handler不一定要在主线程建 但如Handler handler = new Handler(); 会使用当前的Looper的, 由于要更新UI 所以最好在主线程 new Handler() { mLooper = Lo...

shzwork
17分钟前
2
0
h5获取摄像头拍照功能

完整代码展示: <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum......

诗书易经
19分钟前
1
0
正向代理和反向代理

文章来源 运维公会:正向代理和反向代理 1、正向代理 (1)服务对象不同 正向代理服务器的服务对象是客户端,可以将客户端和代理服务器看作一个整体。 (2)配置方法不同 需要在客户端配置代...

运维团
35分钟前
2
0
5个避免意外论文重复率高的方法

即使你不是故意抄袭,但你可能在无意中抄袭了别人的论文, 这个叫做意外抄袭,它可能正发生在你身上,如果你不熟悉学术 道德规范,这里将告诉你5个基本的方法来避免意外抄袭。 Tip1 熟悉其他...

论文辅导员
37分钟前
2
0
Maven通过profiles标签读取不同的配置

<profiles> <profile> <id>dev</id> <properties> <profiles.active>dev</profiles.active> </properties> ......

时刻在奔跑
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部