文档章节

上传图片并实现本地预览

fanyx
 fanyx
发布于 2016/10/18 11:25
字数 741
阅读 24
收藏 0

效果预览

输入图片说明

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>本地上传图片并实现预览</title>
	<link rel="stylesheet" type="text/css" href="css/upload.css" />
	<!-- <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> -->
	<script type="text/javascript" src="js/jquery1.11.js"></script>
	<script type="text/javascript" src="js/upload.js"></script>
</head>
<body>
	<div class="upload-wrap">
		<div class="upload-box">
			<i class="close-btn"></i>
			<span class="upload-span">上传图片</span>
			<input class="upload-btn" accept="image/*" type="file" name="cus_upload_pic[]" />
			<div class="preview-img-box"></div>
		</div>
	</div>
</body>
</html>

css样式

用css实现上传按钮的美化,这个我就随便写了写,比较丑

.upload-wrap{
	overflow: hidden;
}
.upload-box{
	position: relative;
	width: 106px;
	height: 106px;
	border:1px solid #e1e1e9;
	overflow: hidden;
	float: left;
	margin: 10px;
}
.upload-span{
	display: block;
	width: 100%;
	height: 100%;
	line-height: 100px;
	font-size: 20px;
	color: #fff;
	background: green;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
}
.upload-btn{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	font-size:90px;
	z-index: 10;
	opacity: 0;
	filter:Alpha(opacity=0);
}
.close-btn{
	display: block;
	width: 17px;
	height: 17px;
	position: absolute;
	background: url(../img/close.gif);
	right: -1px;
	top: -1px;
	z-index: 100;
	cursor: pointer;
}
.preview-img-box{
	width: 100px;
	height: 100px;
	padding: 3px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 15;
	background: #fff;
	display: none;
}
.preview-img-box img{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}

该句样式一定要有。如果没有此句,js会报错。

.preview-img-box img{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}

没有此句css样式,上传图片效果如下图: 输入图片说明     

报错: 输入图片说明


js

IE10以上才支持FileReader();针对IE7~IE9使用滤镜的方式实现图片预览。由于accept属性IE9及以下浏览器不兼容,因此在上传图片时对文件后缀名进行验证。

$(function(){
	$(document).on('change','.upload-btn',function(){
		var _this = $(this);
		var imgbox = _this.siblings('.preview-img-box');
		var maxWidth = imgbox.width();
		var maxHeight = imgbox.height();
		//IE浏览器,使用滤镜
		if(navigator.userAgent.indexOf("MSIE")>0){
			if(navigator.userAgent.indexOf("MSIE 7.0")>0 || navigator.userAgent.indexOf("MSIE 8.0")>0 || navigator.userAgent.indexOf("MSIE 9.0")>0){
				var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; 
				_this.select();
				var imgsrc = document.selection.createRange().text;
				var imgreg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
				if(imgreg.test(imgsrc)){
					imgbox.show();
					imgbox.html('<img class="preview-img" id="PreviewImg" src="" />');
					var img = document.getElementById("PreviewImg");
					img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgsrc;
					var rect = clacImgZoomParam(maxWidth, maxHeight, img.offsetWidth, img.offsetHeight);
					status = ('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
					var odiv = "<div style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+imgsrc+"\"'></div>";
					imgbox.html(odiv);
					document.selection.empty();
					var upload_box = '<div class="upload-box"><i class="close-btn"></i>'
									+'<span class="upload-span">上传图片</span>'
									+'<input class="upload-btn" accept="image/*" type="file" name="cus_upload_pic[]" />'
									+'<div class="preview-img-box"></div></div>';
					$(upload_box).appendTo($('.upload-wrap'));
				}
				else{
					alert('图片类型必须是.gif,jpeg,jpg,png中的一种!')
				}
			}
		}
		else{
			var ofile = _this.prop('files')[0] || _this.files[0];
			if(ofile){
				if(window.FileReader){
					var fr = new FileReader();
					fr.onloadend = function(e){
						var imgbox = _this.siblings('.preview-img-box');
						imgbox.show();
						console.log(e.target.result);
						var oimg = '<img class="preview-img" src="'+ e.target.result +'" />';
						$(oimg).appendTo(imgbox);
						var Img = imgbox.find('.preview-img');
						var rect = clacImgZoomParam(maxWidth, maxHeight, Img.width(), Img.height());
						Img.css({
							"display":"block",
							"width":rect.width,
							"height":rect.height,
							"margin-top":rect.top,
							"margin-left":rect.left
						})
					}
					fr.readAsDataURL(ofile);
				}
				var upload_box = '<div class="upload-box"><i class="close-btn"></i>'
								+'<span class="upload-span">上传图片</span>'
								+'<input class="upload-btn" accept="image/*" type="file" name="cus_upload_pic[]" />'
								+'<div class="preview-img-box"></div></div>';
				$(upload_box).appendTo($('.upload-wrap'));
			}
		}
	})

	//删除功能
	$(document).on('click','.close-btn',function(){
		var oindex = $(this).parents('.upload-box').index();
		if(oindex == 0){
			$(this).siblings('.preview-img-box').html('');
			$(this).siblings('.preview-img-box').hide();
			$(this).siblings('.upload-btn').val('');
			$(this).siblings('.upload-btn').show();
			$(this).siblings('.upload-span').show();
		}
		else{
			$(this).parents('.upload-box').remove();
		}
	})

})
function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
    var param = {top:0, left:0, width:width, height:height};  
    if( width>maxWidth || height>maxHeight )  
    {  
        rateWidth = width / maxWidth;  
        rateHeight = height / maxHeight;  
          
        if( rateWidth > rateHeight )  
        {  
            param.width =  maxWidth;  
            param.height = Math.round(height / rateWidth);  
        }else  
        {  
            param.width = Math.round(width / rateHeight);  
            param.height = maxHeight;  
        }  
    }
    param.left = Math.round((maxWidth - param.width) / 2);  
    param.top = Math.round((maxHeight - param.height) / 2);  
    return param;  
}

© 著作权归作者所有

fanyx
粉丝 0
博文 3
码字总数 1544
作品 0
成都
前端工程师
私信 提问
前端图片预览,上传前预览【兼容IE7、8、9、10、11,Firefox,Chrome】

在现在的Web开发中不可避免的会做一个图片预览的功能,比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图...

IT智云编程
2018/11/05
0
0
Jcrop 整合 FileAPI 图像裁剪上传

Jcrop是一款优秀的jQuery插件,可以非常方便地实现图像裁剪,而且功能十分的强大。 一般的情况下,图像裁剪的实现要经过两次图像上传,第一次将图片上传到后台,后台返回一个链接,通过这个链...

Acce1erator
2015/12/28
347
0
javascript实现图片伪异步上传

实现逻辑 首先要知道, ajax无法发送带有文件的post请求所以,所以还是要用同步的方式,但是刷新的时候,我们不要在原来的页面刷新,去一个隐藏的iframe里面刷新,form表单中action正常填写处...

rand
2018/08/27
0
0
前端战五渣学前端——FileReader预览本地文件

距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒。可能是天气热了吧,有点点躁动。上周看了《哪吒——魔童降世》还不错,还看了...

戈德斯文
07/31
0
0
KodExplorer 4.22 发布,拖拽增强,安全性优化

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

雾渺
2017/10/02
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
6
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
7
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部