<pre name="code" class="javascript">function readyImage(url,callback){
var img = new Image();
img.src=url;
if(img.complete){
var imgWh = [img.width,img.height];
callback(i,imgWh);
}else{
img.onload = function(){
var imgWh = [img.width,img.height];
callback(i,imgWh);
}
}
}
(function($) {
jQuery.fn.extend({
uploadPreview: function(opts) {
opts = jQuery.extend({
width: 0,
height: 0,
imgDiv: opts.imgDiv || "#imgDiv",
imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
maxwidth: 0,
maxheight: 0,
imgurl: null,
maxed: false,
callback: function() { return false; }
}, opts || {});
var _self = this;
var _this = $(this);
if (window.navigator.userAgent.indexOf("MSIE") >= 1 && ($.browser.version == "7.0" || $.browser.version == "8.0") ) {
//兼容ie8或以下
_this.after("<input type='text' placeholder='ie8' style='width:0px;'>");
}
var imgDiv = $(opts.imgDiv);
imgDiv.css({'overflow':'hidden','width':opts.width+'px','height':opts.height+'px'});
//imgDiv.width(opts.width);
//imgDiv.height(opts.height);
autoScaling = function() {
var img_width = imgDiv.width();
var img_height = imgDiv.height();
if (img_width > 0 && img_height > 0) {
var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;
if (rate <= 1) {
imgDiv.width(img_width * rate);
imgDiv.height(img_height * rate);
} else {
// imgDiv.css('width','80px');
// imgDiv.css('height','80px');
imgDiv.width(img_width);
imgDiv.height(img_height);
}
var left = (opts.width - imgDiv.width()) * 0.5;
var top = (opts.height - imgDiv.height()) * 0.5;
//imgDiv.css({ "margin-left": left, "margin-top": top });
}
if (opts.maxed && window.navigator.userAgent.indexOf("MSIE") >= 1 && ($.browser.version == "7.0" || $.browser.version == "8.0" || $.browser.version == "9.0") ) {
imgDiv.css('display','');
imgDiv.find('img').css('display','') ;
}
imgDiv.show();
}
_this.change(function(e) {
if (this.value) {
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
if (typeof comm.alert =="function"){
comm.alert({width:420,imgClass:'tips_i',imgFlag:true,content:"图片类型必须是" + opts.imgType.join(",") + "中的一种"});
} else {
alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");
}
this.value = "";
return false;
}
//imgDiv.hide();
if ($.browser.msie && $.browser.version<10) {
if ($.browser.version == "6.0") {
var img = $("<img />");
/*
var image = new Image();
image.src = 'file:///' + this.value;
*/
img.attr('src', 'file:///' + this.value);
img.css({"width":opts.width+'px' ,"height":opts.height+'px'});
imgDiv.empty().append(img);
autoScaling();
}
else {
imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" });
imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
try {
imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = getPath(_this[0]) ;
imgDiv.children().hide();
} catch (e) {
if (typeof comm.alert =="function" ){
comm.alert({width:420,imgClass:'tips_i',imgFlag:true,content:"无效的图片文件!"});
} else {
alert("无效的图片文件!");
}
return;
}
_this.blur();
if (window.navigator.userAgent.indexOf("MSIE") >= 1 && ($.browser.version == "7.0" || $.browser.version == "8.0" || $.browser.version == "9.0") ) {
_this.next('input[placeholder="ie8"]').focus();
}
//_this[0].unselect();
setTimeout("autoScaling()", 1);
}
}
else if (window.navigator.userAgent.indexOf("Firefox") >= 1 || window.navigator.userAgent.indexOf("Chrome") >=1 ) {
var img = $("<img />");
img.attr('src', window.URL.createObjectURL(this.files.item(0)) );
img.css({ "vertical-align": "middle","width":opts.width ,"height":opts.height});
imgDiv.empty().css('display','').append(img);
setTimeout("autoScaling()", 1);
} else if ( $.browser.safari ){
var file = this.files[0];
if (window.FileReader){
var reader = new FileReader() ;
reader.onload = function (e) {
//$('#Img0').attr('src', e.target.result);
var img = $("<img />");
img.attr('src', e.target.result );
img.css({ "vertical-align": "middle","width":opts.width ,"height":opts.height});
imgDiv.empty().css('display','').append(img);
}
reader.readAsDataURL(file);
setTimeout("autoScaling()", 1);
} else if (window.webkitURL){
var img = $("<img />");
img.attr('src', window.webkitURL.createObjectURL(this.files.item(0)) );
img.css({ "vertical-align": "middle","width":opts.width ,"height":opts.height});
imgDiv.empty().css('display','').append(img);
setTimeout("autoScaling()", 1);
}
}
}
//检测图片的大小
var fileInput = $(this)[0] ,byteSize='';
if ( fileInput.files && fileInput.files[0] ){
byteSize =fileInput.files[0] && fileInput.files[0].size;
} else {
var _img = $(this).parent().prev().find('img')[0];
if (!_img){
byteSize = 0 ;
} else {
byteSize = _img.fileSize ;
}
/*
var fileobject = new ActiveXObject ("Scripting.FileSystemObject");
var file = fileobject.GetFile (document.getElementById("fileSelector").value);
byteSize = file.Size;
*/
}
// alert( imgDiv[0].currentStyle.filter )
if (opts.maxSize && byteSize && (byteSize / (1024*1024) ).toFixed(2) > opts.maxSize ){
if (typeof comm.alert =="function" ){
comm.alert({width:420,imgClass:'tips_i',imgFlag:true,content:"图片大小不超过"+opts.maxSize +"M"});
} else {
alert("图片大小不超过"+(byteSize / (1024*1024) ).toFixed(2) +"M");
}
//重设预览图片
opts.maxed = true;
$(this).parent().prev().find('img').attr('src', opts.imgurl || 'resources/img/noImg.gif');
if (window.navigator.userAgent.indexOf("MSIE") >= 1 && ($.browser.version == "7.0" || $.browser.version == "8.0" || $.browser.version == "9.0") ) {
//imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = opts.imgurl || 'resources/img/noImg.gif' ;
imgDiv[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image,src='resources/img/noImg.gif')";
imgDiv[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src= opts.imgurl || 'resources/img/noImg.gif' ;
}
//$(this).parent().prev().css('filter','');
//清空input file(兼容ie,fire,chrome)
var currFile = $(this) ,newFile;
newFile = currFile.clone().val("");
currFile.after( newFile );
currFile.remove();
newFile.uploadPreview(opts);
return;
};
opts.maxed = false ;
});
}
});
})(jQuery);
//获得上传控件的值,obj为上传控件对象
function getPath(obj) {
alert(obj)
if (obj) {
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text ;
}
else if (window.navigator.userAgent.indexOf("Firefox") >= 1 || window.navigator.userAgent.indexOf("Chrome")) {
if (obj.files) {
//return obj.files.item(0).getAsDataURL();
return window.URL.createObjectURL(this.files.item(0)) ;
}
return obj.value;
}
alert(window.navigator.userAgent)
return obj.value;
}
}
//清空上传控件的值,obj为上传控件对象
function clearvalue(obj) {
obj.select();
document.execCommand("delete");
}