文档章节

纯前端的上传前图片预览,兼容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
原创jquery图片上传预览插件uploadView

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

够过瘾
2015/10/24
5.5K
0
ueditor 1.4.2 & 文档更新发布

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

战毅
2014/05/16
3.3K
13

没有更多内容

加载失败,请刷新页面

加载更多

中国龙-扬科
25分钟前
2
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
29分钟前
2
0
NetCore MVC Demo

地址:http://114.116.9.72:5411

whltian
36分钟前
1
0
Netty handle方法周期 (四)

写了一个练习之后,发现自定义的助手类每次肯定是必须的,对于不同的业务逻辑需求,会写相对应的逻辑 最简单的查看Handle生命周期的方式,就是重写上级方法,看名字差不多应该可以知道方法的作用 ...

_大侠__
41分钟前
9
0
vue主动刷新页面及列表数据删除后的刷新实例

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者...

前端小攻略
52分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部