图片浏览上传兼容所有浏览器

阅读：评论：0

图片浏览上传兼容所有浏览器

代码使用js原生完成。就是为了移植方便。由于时间原因尚有限制文件大小与限制图片格式没有完成

/*
*author : 矛盾距离
*date : 2014/4/18 9:52
*topic : 图片上传浏览
*description : 这是原生实现的直接使用就可
*/
var ImagePreview = function(file, img, options) {this.file = file;this.img = img;this._data = null; //图片数据var opt = this._setOptions(options);this.ratio = opt.ratio;this.maxWidth = opt.maxWidth;this.maxHeight = opt.maxHeight;this.maxSize = opt.maxSize;this.filterFormat = opt.filterFormat; //允许的图片格式,不同的数据格式请用"|"隔开this._preload= null; //预加载对象用于获取数据
}
ImagePreview.prototype = {_setOptions : function(options){var opt = {ratio : 0, //自定义比例maxWidth : 0, //缩略图宽度maxHeight : 0, //缩略图高度maxSize : 50, //默认限制图像大小单位KBfilterFormat : "jpg|jpeg|png|gif"};return this._extend(opt, options || {});},_extend : function(target, source){for(var p in source) {if (source.hasOwnProperty(p)){target[p] = source[p];}}return target;},//客户端调用preview : function() {if (!this._checkimg()){return;}var Sys = this._userAgent();//首先判断ie,减少代码执行。按照使用量排序if ((Sys.ie) && (Sys.ie == 7.0 || Sys.ie == 8.0)){this._data = this._filterData();this._filterProcess();}else if(Sys.firefox || Sys.chrome)  {this._data = this._commonData();this._commonProcess();}else{this._data = this._simpleData();this._commonProcess();}},//滤镜显示_filterProcess : function() {var dataPath = this._data;this._filterPreload();var preload = this._preload;try{preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataPath;}catch(e){alert("滤镜错误");}this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + dataPath + "")";var alpha = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";this._imgShow(alpha, preload.offsetWidth, preload.offsetHeight);},//google与 firefox 显示方式_commonProcess : function() {var dataPath = this._data;var preload = this._preload = new Image();var oThis = this;var onload = function(){oThis._imgShow(dataPath, this.width, this.height);};load = r = function() {oThis._error("加载过程中发生错误")};this._preload.src = dataPath;},//远程获取处理_remoteProcess : function() {//暂不实现暂时不需要},_imgShow : function(src, width, height){var img = this.img;var style = img.style;var ratio = Math.max( 0, this.ratio ) || Math.min( 1,Math.max( 0, this.maxWidth ) / width  || 1,Math.max( 0, this.maxHeight ) / height || 1);//设置预览尺寸style.width = und( width * ratio ) + "px";style.height = und( height * ratio ) + "px";//设置srcimg.src = src;},//滤镜数据获取方式ie7, ie8_filterData : function() {this.file.select();try{return ateRange().text;}finally{pty();}},//一般数据获取程序(google&&firefox)_commonData : function() {//注意这里的webkitURL chrome10.0+;if (window.URL==undefined){return ateObjectURL(this.file.files.item(0));}else{return ateObjectURL(this.file.files.item(0));}},// 简单获取数据方式ie10 _simpleData : function() {return this.file.value;	},//设置滤镜预载图片对象用于获取图片大小_filterPreload : function() {if (!this._preload){var preload = this._preload = ateElement("div");preload.style.width = "1px";preload.style.height = "1px";preload.style.visibility = "hidden";preload.style.position ="absolute";preload.style.left = "-9999px";p = "-9999px";preload.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')";var body = document.body; body.insertBefore( preload, body.childNodes[0]);}},//检查图片是否符合条件_checkimg :	function(){var value = this.file.value;var check = true;if ( !value ) {check = false; alert("请先选择文件！");} else if ( !RegExp( ".(?:"+this.filterFormat+")$", "i" ).test(value) ) {check = false; alert("只能上传以下类型：" +this.filterFormat);} else if ( this.filterFormat.indexOf( "|" + value + "|" ) >= 0 ) {check = false; alert("已经有相同文件！");}return check;},_error : function(err) {alert(err);return;},_userAgent : function() {var Sys = {};var ua = LowerCase();var s;(s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :(s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :(s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :(s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :(s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;return Sys;}
}

测试页面代码

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><script src="preview.js"></script></head><body><img id="idImg"/><form>请上传你的相片：<INPUT type="file" name="file" id="up"><input type="submit" value="上传"></form><script>var file = ElementById("up");var img = ElementById("idImg");var ip = new ImagePreview(file, img, {maxWidth: 200, maxHeight: 200});hange = function(){ ip.preview(); };</script></body>
</html>

本文发布于:2024-01-28 01:20:26，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17063760343797.html

上一篇：【Nginx】图片防盗链

下一篇：Android APP图片优化

标签：浏览器上传图片

留言与评论（共有 0 条评论）