上传图片并实现本地预览

最新推荐文章于 2023-05-19 14:44:32 发布
最新推荐文章于 2023-05-19 14:44:32 发布
阅读量236 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/fanyx/blog/759941
版权

效果预览

输入图片说明

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;  
}

转载于:https://my.oschina.net/fanyx/blog/759941

chenju0591
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片上传在本地显示
qq_52440306的博客
06-16 306
如何上传图片在本地显示， 1，给input元素 type设置为file类型 <img :src='burl' @change="chan" ref='file'> 2，添加改变事件，通过改变事件触发函数，在函数里new一个文件阅读器， let reader=new FileReader();//文件阅读器; 3，获取inupt节点，获取files属性,files属性里保存了图片信息； let file=this.$refs.file; if(file.files[0].type.in
js实现上传图片前本地预览
php菜鸟博客
12-05 49
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传图片本地预览效果</title> </head> <body> <script type="text/javascript" src="http://cod...
上传文件时预览本地图片或者视频（window.URL.createObjectURL 的使用）
carcarrot的博客
09-05 3127
window.URL.createObjectURL 可以用于在浏览器上预览本地图片或者视频 在预览视频时，我一直以为将window.URL.createObjectURL生成的URL，赋给video中的source标签是可以的，结果是不行的，得不到视频，如下图 需要将其赋给video标签才行，如下图像腾讯，优酷都是这么做的，没有使用source标签，如下图（只不过不是本地视频）...
关于上传图片本地预览方案
皮蛋很白的博客
01-07 340
方案一：结合服务端实现 将用户所选的图片上传到服务器 服务器接收上传的文件保存到服务器并返回服务器上的图片访问地址（http://example.com/a.jpg） 客户端将 img 的 src 设置为收到的图片地址 优点：兼容性好 缺点：麻烦 方案二：纯客户端实现 有两种 HTML5 增加的 API： 使用 URL.createObjectURL() 创建一个 DOMString，返回一个表示传递的参数对象的 URL，例如：blob:null/88a6a6a6-9858-4bfe-81ed
关于本地上传图片时的预览(结合el-upload)
最新发布
呐的博客
05-19 842
URL.createObjectURL()方法介绍该方法跟URL.createObjectURL()的使用方法--auto-upload=false 先关闭el-upload的自动上传改为手动。
jQuery实现本地预览上传图片功能
10-23
在本文中，我们将深入探讨如何使用jQuery来实现本地预览上传图片的功能，这对于网页上的图像交互体验至关重要。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个功能中...
jquery实现图片上传前本地预览功能
10-22
以下是如何使用jQuery实现图片上传前本地预览的详细步骤。 首先，HTML部分是页面的基础结构。这里我们创建了一个`<img>`标签用于展示预览图片，并设置了一个`<input type="file">`元素来选择文件。由于原生`...
jquery实现图片上传前本地预览
10-19
主要为大家详细介绍了jquery实现图片上传前本地预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于jquery实现图片上传本地预览功能
10-23
主要介绍了基于jquery实现图片上传本地预览功能的相关资料,需要的朋友可以参考下
原生js FileReader对象实现图片上传本地预览效果
10-19
主要介绍了原生js FileReader对象实现图片上传本地预览效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5 FileReader 实现本地图片上传并预览应用实例
baidu_41601048的博客
01-07 1万+
1、FileReader接口的方法 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。   FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,...
简单的做一个图片上传预览（web前端）
热门推荐
红岸基地
04-23 1万+
在做web项目很多的时候图片都是避免不了的，所以操作图片就成了一个相对比较棘手的问题，其实也不是说很麻烦，只是说上传然后直接预览的过程很恶心，今天简单的做一个处理。效果预览：代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML5上传图片预览&lt;/title&gt; &lt;meta http-e...
Java实现本地上传图片以及读取
qq_42892856的博客
05-19 1636
1.配置application文件 pro.image.path=D:/test/ pro.categoryImage.path=D:/category/ 2.控制层 @Value("${pro.image.path}") private String proImagePath; @PostMapping("/system-port/productPicture") @ResponseBody public void updateProductPicture() {
前端如何实现本地图片上传？
qq_47828130的博客
02-22 3160
前端实现本地图片上传
vue上传图片前本地预览
weixin_39818813的博客
03-05 950
思路：上传前获取到图片的base64数据，然后绑定到图片的src上 <template> <!-- 上传照片 --> <div> <Upload class="writeResumeHeadImg" :show-upload-list="false" :before-upload="handleU...
JS兼容各个浏览器的本地图片上传即时预览效果
weixin_34320724的博客
02-25 181
JS兼容各个浏览器的本地图片上传即时预览效果     很早以前 在工作曾经碰到这么一个需求，当时也是纠结了很久，也是google了很久，没有碰到合适的demo，今天特意研究了下这方面的的问题，所以也就做了个简单的demo来实现 本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解...
input file 方式上传图片并实现实时预览
小破孩的博客
11-16 3609
用普通的html的 &lt;input type="file"/&gt; 标签是不能实现实时预览功能的，获取表单的值可以得到图片所在路径：C:\fakepath\test.png，如果将它直接赋值给img标签的href属性，会报错：Not allowed to load local resource（不允许加载本地资源）。 功能实现 可以通过file标签和js的 FileReader 接口来实现...
文件上传之本地预览
【蜀山风行】的专栏
07-11 581
不需要上传文件至服务端即可完成文件预览功能。
angular ng-zorro 之upload图片上传，编辑时无法显示缩略图
My_Soul_的博客
03-12 1695
最近在用ng-zorro中的图片上传时，发现已有的图片，无法在表单中的upload下显示，如下图可以看到我的数据是获取到的，然而在点击编辑按钮时，却无法显示图片缩略图。 这是我在ts里定义的fileList变量： 这是点击编辑时对获取的当前数据的赋值处理，可以看到我相关的数据push到了fileList变量中。 这是我html中使用upload的相关代码，基本是抄的ng-zorro中的内容，...
JavaScript实现图片上传预览技术及兼容性处理
"这篇文章主要介绍了如何使用JavaScript实现图片上传预览效果，包括各种浏览器的兼容性和不同的预览方法，如ie7/8的滤镜预览法，Firefox 3的getAsDataURL方法，以及针对Opera、Safari和Chrome的后台支持预览方案。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值