上传图片并实现本地预览（1）

该版本是带有css样式的实现效果,属于初步整理。
纯js实现效果请看上传图片并实现本地预览（2）。
这两篇文档的区别在于：兼容IE时，本文的滤镜css样式写在css样式中。

效果预览

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://www.cnblogs.com/fanyx/p/5973562.html

上传图片并实现本地预览（1）相关推荐

本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列谷歌火狐等浏览器注意:不支持safari 插件使用说明: 1.必须引用jquery ...
html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
网页上传图片时，直接本地预览无需上传服务器
最近在做一个项目时遇到上图片需要预览功能,在做的时候我们在服务器url预览和本地直接预览两种方式中做了选择,最后敲定使用本地直接预览.原因是如果等到上传完毕之后再返回图片URL给用户预览,一旦 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
element upload预览_vue element upload实现图片本地预览
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML class="avatar-uploader" action=&q ...
ElementUI h5 移动端照片拍照本地预览旋转压缩并上传
文章目录调用摄像头拍照本地预览旋转压缩上传功能需求是移动端扫描二维码之后,跳转到在线网页进行自拍,然后上传拍照结果. 调用摄像头拍照在h5中,使用input type="file ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
JS实现图片上传时的本地预览，兼容IE和firefox谷歌
旁白: 一般来说如果要实现在上传前预览图片的话,用纯服务器端的语言必定是办不到的,需要先传到服务器上,哪怕是只是服务器上的临时文件,这也是个很麻烦的事情,不过可以用javascript来做这件事.下面 ...
本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

上传图片并实现本地预览（1）

效果预览

html

css样式

js

上传图片并实现本地预览（1）相关推荐

最新文章

热门文章