/*
作者：skyblue
版本：1.0.0
主页：http://skyblue.cnblogs.com/
请使用者保留作者信息
需要引用Jquery
调用方法：
var ip = new ImagePreview(document.getElementById("file"), document.getElementById("imgpic"), {imgType:'.jpg|',isCheckSize:true,onShow:setPicSize,onCheckSize:setCheckPicSize});
ip.preview();
Content-Type: multipart/related; boundary="_CLOUDGAMER"
--_CLOUDGAMER
Content-Location:blankImage
Content-Transfer-Encoding:base64
R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==
*/
var ImagePreview = function(file, pic, options) {
this.file = file;//文件对象
this.img = pic;//预览图片对象
this._preload = null;//预载图片对象
var opt = this._setOptions(options);
this.action = opt.action;
this.timeout = opt.timeout;
this.ratio = opt.ratio;
this.maxWidth = opt.maxWidth;
this.maxHeight = opt.maxHeight;
this.minWidth = opt.minWidth;
this.minHeight = opt.minHeight;
this.imgType = opt.imgType;
this.isCheckSize=opt.isCheckSize;
this.onCheck = opt.onCheck;
this.onShow = opt.onShow;
this.onErr = opt.onErr;
this.onCheckSize = opt.onCheckSize;
};
ImagePreview.prototype = {
//设置默认属性
_setOptions: function(options) {
this.options = {//默认值
ratio: 0,//自定义比例
maxWidth: 0,//缩略图宽度
maxHeight: 0,//缩略图高度
minWidth: 0,//上传宽度限制
minHeight: 0,//上传高度限制
imgType: '',//图片类型
isCheckSize: false,//是否校验图片尺寸
onCheck: function(){},//预览检测时执行
onShow: function(){},//预览图片显示回调
onErr: function(){},//预览错误时执行
onCheckSize:function(){},//校验回调函数
//以下在remote模式时有效
action: undefined,//设置action
timeout: 0//设置超时(0为不设置)
};
return $.extend(this.options, options || {});
},
//开始预览
preview: function() {
if ( this.file && false !== this.onCheck() ) {
if(this.imgType!=''){
var type=this.file.value.substr(this.file.value.lastIndexOf(".")).toLowerCase()+"|";
if(this.imgType.toLowerCase().indexOf(type)!=-1){
this._preview();
}else{
alert("图片格式不正确，只能选择："+this.imgType);
return ;
}
}else{
alert("图片格式不正确，只能选择："+this.imgType);
return ;
}
}
},
//预览程序
_preview: function() {
this._show();
},
//根据mode返回数据获取程序
_show: function() {
var mode=this._getMode();
switch (mode) {
case "Filter" :
this._filterData();
break;
case "FileReader" :
this._fileReaderData();
break;
case "AsDataURL" :
this._asDataURLData();
break;
case "CreateObjectURL" :
this._objectURLData();
break;
case "Simple" :
this._simpleData();
break;
case "FilterIE9" :
this._filterIE9Data();
break;
}
},
_getMode: function(){
var browserVersion= window.navigator.userAgent.toUpperCase();//浏览器版本信息
if (window.navigator.appName=="Microsoft Internet Explorer"){//ie浏览器
if(browserVersion.indexOf("MSIE 6.0")>-1){//ie6
return "Simple"
}else{//ie7、ie8、ie9未测试
if(browserVersion.indexOf("MSIE 10.0")>-1){//ie10
return "FileReader"
}else if(browserVersion.indexOf("MSIE 9.0")>-1){//ie9
return "FilterIE9";
}else{//ie7、ie8
return "Filter"
}
}
}else if(browserVersion.indexOf("FIREFOX")>-1){ //火狐浏览器
var firefoxVersion= parseFloat(window.navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if(firefoxVersion<7){//firefox7.0以下版本
return "AsDataURL"
}else{//火狐7.0以上版本
return "CreateObjectURL"
}
}else if(file.files){//兼容chrome等，也可以兼容火狐，通过HTML5来获取路
return "FileReader";
}else{//其他
return "Simple";
}
},
_simpleData:function(){
var oThis = this;
this._preload = new Image;
this._preload.onload = function(){
$(oThis.img).show();
$(oThis.img).attr("src", oThis.file.value);
oThis._imgShow(this.width,this.height);
};
this._preload.src = oThis.file.value;
},
_fileReaderData: function() {
if(typeof FileReader !== "undefined"){
var reader = new FileReader();
var oThis = this;
reader.onload = function(e){
oThis._preload = new Image;
oThis._preload.onload = function(){
$(oThis.img).show();
$(oThis.img).attr("src", e.target.result);
oThis._imgShow(this.width,this.height);
};
oThis._preload.src = e.target.result;
}
reader.readAsDataURL(this.file.files[0]);
}
},
_asDataURLData: function() {
var oThis = this;
this._preload = new Image;
this._preload.onload = function(){
$(oThis.img).show();
$(oThis.img).attr("src", oThis.file.files[0].getAsDataURL());
oThis._imgShow(this.width,this.height);
};
this._preload.src = this.file.files[0].getAsDataURL();
},
_objectURLData: function() {
var oThis = this;
this._preload = new Image;
this._preload.onload = function(){
$(oThis.img).show();
$(oThis.img).attr("src", window.URL.createObjectURL(oThis.file.files[0]));
oThis._imgShow(this.width,this.height);
};
this._preload.src = window.URL.createObjectURL(this.file.files[0]);
},
//设置滤镜预载图片对象
_filterPreload: function() {
if (!this._preload ) {
this._preload = document.createElement("div");
//隐藏并设置滤镜
$(this._preload).css({
width: "1px", height: "1px",
visibility: "hidden", position: "absolute", left: "-9999px", top: "-9999px",
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});
//插入body
var body = document.body; body.insertBefore( this._preload, body.childNodes[0] );
}
},
_filterData: function() {
this._filterPreload();
this.file.select();
var data = document.selection.createRange().text.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });
try{
this._preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
}catch(e){
this._error("filter error");
return;
}
//设置滤镜并显示
this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
var browserVersion= window.navigator.userAgent.toUpperCase();//浏览器版本信息
if(browserVersion.indexOf("MSIE 7.0")>-1){//ie7
//找ImagePreviewd.js路径IE7要单独做一1像素的透明图片blankimage.gif
//alert(document.scripts[document.scripts.length-3].getAttribute("src"));
this.img.src= document.scripts[document.scripts.length - 3].getAttribute("src", 4).replace("ImagePreviewd.js","blankimage.gif");
}else{
this.img.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
}
this._imgShow( this._preload.offsetWidth, this._preload.offsetHeight );
},
_filterIE9Data: function() {
this._filterPreload();
this.file.select();
//点试找
$(this.img.parentNode.parentNode).focus();
this.file.blur();
var data = document.selection.createRange().duplicate().text;
document.selection.empty();
try{
this._preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data+"?"+Math.random();
}catch(e){
this._error("filter error");
return;
}
alert("图片读取成功！");
//设置滤镜并显示
$(this.img).attr("src", "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
$(this.img).css({
- 1
- 2
前往页