文档章节

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

k
 kakashi_chen
发布于 2015/11/26 10:41
字数 369
阅读 18
收藏 0
点赞 0
评论 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
jQuery 关于IE9上传文件无法进入后台原因及解决办法(ajaxfileupload.js第四弹)

第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于《ajaxfileupload.js系列》的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏览器(其实是故意的...

我不会抽烟
2014/09/11
0
0
react-native开发常见问题

react-native开发中常见的问题汇总,以下是我最近在项目开发中遇到的常见的问题,做以下记录以便后续项目中使用。 1. 监听网状连接状态的变化 2. 处理特殊页面的回退按钮和物理回退事件 3. c...

Undo_03
06/14
0
0
无需Flash实现图片裁剪——HTML5中级进阶

前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕。 需求就是那么简单,在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是,...

力谱宿云
2016/05/09
564
0
HTML5 进阶系列:文件上传下载

前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本。想要更好...

林鑫
2017/07/03
0
0
flash 头像上传裁剪预览

安装及部署: 1. 上传到 apache,iis,tomcat 服务器,通过域名访问 index.html 例如:http://www.hdfu.net/index.html v1.8 1.优化摄像头拍照不清晰(目前支持高清) v1.7 1.优化三张预览图...

easymvc
2013/01/29
17.1K
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java 复制对象有哪些方式

java 复制对象有哪些方式 Apache的 Common beanutils库 org.apache.commons.beanutils.BeanUtils.copyProperties(dest,origin); Springframework 的BeanUtil 依赖: <dependency> ......

黄威
23分钟前
1
0
1.13 单用户模式

命令 init 6 #重启,reboot或shutdown -r now init 0 #重启,poweroff 单用户模式:密码忘记情况下 主机重启,按方向键↑,选择CentOS Linux (3.10.0-514.e17.X86 64) 7 (Core),按e键编辑...

小丑鱼00
25分钟前
1
0
jstack的简单使用

公司测试反应, 一个java应用的机器,cpu始终是30%, 即使不做交易, 于是想到了之前看到的jstack文章, 实践步骤记录一下: 1, 找出java应用的进程号 ps -ef|grep 应用名|grep -v grep 2, 找出pid...

零二一七
30分钟前
1
0
崛起于Springboot2.X之项目war打包部署(18)

将springboot项目打包步骤: 1、启动类 extends SpringBootServletInitializer 2、启动类添加覆盖方法 @Overrideprotected SpringApplicationBuilder configure(SpringApplicationBuilder......

木九天
39分钟前
2
0
导入CSV文件就行数据整理分析

#-*-coding:utf-8-*-import csv,os,re,mathlocalPath=input("请输入所有群文件的根目录:") #所有QQ群文件的物理根目录路径def info(): info_dic=[] dirList=os.listdi...

Kefy
45分钟前
3
0
CoreText进阶(六)-内容大小计算和自动布局

CoreText进阶(六)-内容大小计算和自动布局 其它文章: CoreText 入门(一)-文本绘制 CoreText入门(二)-绘制图片 CoreText进阶(三)-事件处理 CoreText进阶(四)-文字行数限制和显示更...

aron1992
47分钟前
1
0
一个Unity高人的博客,涉猎范围很广,深度也很深。

https://blog.csdn.net/ecidevilin/article/list/

爽歪歪ES
49分钟前
0
0
Spring Cloud Config-Git后端

EnvironmentRepository的默认实现使用Git后端,这对于管理升级和物理环境以及审核更改非常方便。要更改存储库的位置,可以在Config Server中设置“spring.cloud.config.server.git.uri”配置...

itcloud
50分钟前
1
0
centos7 卸载mysql

[root@zyf ~]# rpm -qa|grep -i mysqlmysql-community-libs-5.6.34-2.el7.x86_64mysql-community-server-5.6.34-2.el7.x86_64mysql-community-release-el7-5.noarchmysql-community-......

Yao--靠自己
59分钟前
0
0
【Spring 系列 条件注解】

Spring 提供了按条件注册Bean的功能涉及到两个组件分别是:核心接口Condition,核心注解Conditional。 1、示例说明 为了演示条件注解的效果,需要定义一个属性文件,然后根据属性文件中配置的...

HansonReal
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部