文档章节

纯前端的上传前图片预览,兼容IE系列

k
 kakashi_chen
发布于 2015/11/26 10:41
字数 369
阅读 23
收藏 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>By:DragonDean</title>
	<script type="text/javascript">
		//下面用于图片上传预览功能
		function setImagePreview(avalue) {
		    var docObj = document.getElementById("doc");

		    var imgObjPreview = document.getElementById("preview");
		    if (docObj.files && docObj.files[0]) {
		        //火狐下,直接设img属性
		        imgObjPreview.style.display = 'block';
		        imgObjPreview.style.width = '150px';
		        imgObjPreview.style.height = '180px';
		        //imgObjPreview.src = docObj.files[0].getAsDataURL();
		        //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
		        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
		    } else {
		        //IE下,使用滤镜
		        docObj.select();
		        var imgSrc = document.selection.createRange().text;
		        var localImagId = document.getElementById("localImag");
		        //必须设置初始大小
		        localImagId.style.width = "150px";
		        localImagId.style.height = "180px";
		        //图片异常的捕捉,防止用户修改后缀来伪造图片
		        try {
		            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
		            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
		        } catch(e) {
		            alert("您上传的图片格式不正确,请重新选择!");
		            return false;
		        }
		        imgObjPreview.style.display = 'none';
		        document.selection.empty();
		    }
		    return true;
		}

	</script>
</head>

<body>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tbody>
			<tr>
				<td height="101" align="center">
					<div id="localImag">
						<img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
				</td>
			</tr>
			<tr>
				<td align="center" style="padding-top:10px;">
					<input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
			</tr>
		</tbody>
	</table>
</body>
</html>


本文转载自:http://zhidao.baidu.com/link?url=9dnJBLueosVnP_tQ7aCQfFZAMXicZZPMjfAtboDAJWFdOcfjhvGCW3imwHqai7ji...

共有 人打赏支持
k
粉丝 1
博文 5
码字总数 2296
作品 0
东城
程序员
KodExplorer 4.06 发布,全面开放,支持完整插件模式

KodExplorer 4.06 发布了。KodExplorer可 道云,原名芒果云,是基于 Web 技术的私有云和在线文件管理系统,它提供了类windows经典用户界面,一整套在线文件管理、文件预览、编辑、上传下载、...

雾渺
2017/09/01
1K
10
文件上传组件--WebUploader

WebUploader 是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,延用原来的FLASH...

缪斯的情人
2014/07/15
18K
12
xknaan/Bootstrap_for_DWZ

B-JUI Bootstrap for DWZ富客户端框架(B-JUI),基于DWZ富客户端框架修改。 主要针对皮肤,编辑器,表单验证等方面进行了大量修改。 兼容性 IE8.0+, Chrome[最佳], Firefox, Safari。(IE8 未...

xknaan
2014/08/06
0
0
ueditor 1.4.2 & 文档更新发布

ueditor 1.4.2 & 文档更新发布,更新内容如下: 1.4.2 重构前后端交互功能 前端上传模块统一改用webuploader 整体重构了文件上传的配置方式,改为统一在后端配置,前后端自动打通,详细文档 ...

战毅
2014/05/16
3.2K
13
原创jquery图片上传预览插件uploadView

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

够过瘾
2015/10/24
5K
0

没有更多内容

加载失败,请刷新页面

加载更多

sourcetree 离线免注册登录安装教程

Sourcetree是一个优秀的git可视化管理工具,深受开发者喜爱Sourcetree官网,但是在安装时需要谷歌账户登录,需要翻qiang才可以,此一点一直被人们所诟病。今天本教程就为大家提供离线免登陆安...

QQZZFT
12分钟前
0
0
使用 PostgreSQL 解决一个实际的统计分析问题

使用 PostgreSQL 解决一个实际的统计分析问题作者:老农民(刘启华)Email: 46715422@qq.com 之前有个朋友扔给我一个奇葩需求,他们公司之前做了一批问卷调查,全部都是统一格式的excel...

新疆老农民
15分钟前
0
0
TypeScript基础入门之高级类型的映射类型

转发 TypeScript基础入门之高级类型的映射类型 高级类型 映射类型 一个常见的任务是将一个已知的类型每个属性都变为可选的: interface PersonPartial {    name?: string;    age?...

durban
30分钟前
0
0
Dubbo源码分析(6):Dubbo内核实现之基于SPI思想Dubbo内核实现

SPI接口定义 定义了@SPI注解 package com.alibaba.dubbo.common.extension; import java.lang.annotation.Documented;import java.lang.annotation.ElementType;import java.lang.an......

郑加威
30分钟前
0
0
RxJS的另外四种实现方式(后记)—— 同时实现管道和链式编程

目录 RxJS的另外四种实现方式(序) RxJS的另外四种实现方式(一)——代码最小的库 RxJS的另外四种实现方式(二)——代码最小的库(续) RxJS的另外四种实现方式(三)——性能最高的库 Rx...

一个灰
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部