juqery预览图片

function checkFormat(filePath) {
var i = filePath.lastIndexOf('.');
var len = filePath.length;
var str = filePath.substring(len,i+1);
var extName = "JPG,GIF,PNG,JPEG,BMP";
if(extName.indexOf(str.toUpperCase()) < 0) {
//alert("请选择正确的图片文件!["+extName+"]");
return false;
}
return true;
}

//对jquery扩展，使img可以预览
(function($) {
$.fn.PreviewImage = function(options) {
var Default = {
ImageClientId: "",
MaxWidth: 300,
MaxHeight: 300
};//默认配置
$.extend(true, Default, options);//扩展
//返回相应的浏览器版本对应的预览
return this.each(function() {
if (Default.ImageClientId != "") {
$(this).unbind("change");
$(this).change(function() {
//验证图片格式

if(checkFormat($(this).val())){
if ($(this).val() == "") {
$("#" + Default.ImageClientId).parent("div").hide();
return;
}
else {
$("#" + Default.ImageClientId).parent("div").show();
}
if ($.browser.msie) {
$("#" + Default.ImageClientId).attr("src", $(this).val());
}
else {
$("#" + Default.ImageClientId).attr("src", $(this)[0].files[0].getAsDataURL());
}
if ($.browser.msie && $.browser.version > 6) {
$("#" + Default.ImageClientId).hide();
$("#" + Default.ImageClientId).parent("div").css({ 'z-index': '999',
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'max-width': Default.MaxWidth + 'px', 'max-height': Default.MaxHeight + 'px',
'width': Default.MaxWidth + 'px', 'height': Default.MaxHeight + 'px'
});
var div = $("#" + Default.ImageClientId).parent("div")[0];
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $("#" + Default.ImageClientId).attr("src");
}
}else{
alert("请选择正确的图片文件![JPG,GIF,PNG,JPEG,BMP]");
$(this).val('');//清空input
var tempObj = $(this)[0];
tempObj.outerHTML = tempObj.outerHTML;
//document.execCommand('Delete');
}
//结束验证
});

$("#" + Default.ImageClientId).load(function() {
var image = new Image();
image.src = $(this).attr("src");
$(this).attr("width", Default.MaxWidth);
$(this).attr("height", Default.MaxHeight);
$(this).attr("alt", Default.MaxWidth + "x" + Default.MaxHeight);
});
}
});
};
})(jQuery);
$(document).ready(function() {
$("#logoFile").PreviewImage({ ImageClientId: "logoImg", MaxWidth: "140", MaxHeight: "140" });
$("#bannerFile").PreviewImage({ ImageClientId: "bannerImg", MaxWidth: "622", MaxHeight: "125" });
});
logoFile是file控件id，logoImg是img标签id