jQuery.fakeFile插件:网站上传控件(3)
四、jQuery. liveFakeFile核心代码：
关于如何创建jQuery插件，这里不做介绍，你可以去官方网站查看相关资料,代码如下：
(function($){
/*
* @author denisdeng dexibe@gmail.com
* blog www.denisdeng.com
* $Version: 2009.8.11 1.0
* param reg[String] the format of image;
* param defImg[String] the default image;
* param btnText[String] the text of button;
* param error[String] the error;
* param imgText[String] the text when image do not show normaly;
*/
$.fn.liveFakeFile = function(o){
var settings = {
reg:"png|jpe?g|gif|bmp",
defImg:'img/defImage.gif',
btnText:'浏览图片',
blankImg: "img/blank.gif",
error: '对不起,照片格式不正确,请重新选择',
imgText:'你已经选择文件'
};
var ie7 = $.browser.msie&&($.browser.version == "7.0");
var ie8 = $.browser.msie&&($.browser.version == "8.0");
var moz = $.browser.mozilla;
return this.each(function(i,v){
if(o) settings = $.extend(settings, o);
var wrap = $('<div class="fakefile"></div>');
var mes = $('<p class="mes"></p>');
var button = $('<button type="button"></button>');
var parent = $(this).parent('.fileinputs');
var imgWrap = $('<div class="imgWrap"></div>');
var defImg = $('<img src="'+settings.defImg+'" />');
imgWrap.append(defImg);
button.append(settings.btnText);
wrap.append(button);
wrap.append(mes);
imgWrap.insertBefore($(this));
$(this).attr("id",'file_'+i).appendTo(wrap);
parent.append(wrap);
$(this).bind('change',function(){
var val = $(this).val();
var imgName = val.slice(val.lastIndexOf("\\")+1);
if(val.match(new RegExp(".(" + settings.reg + ")$", "i"))){
mes.empty();
//针对不能正常显示图片的浏览器
var img = $('<span></span>') .append(settings. imgText).append(imgName);
//针对IE7或IE8浏览器
if(ie7 || ie8){
var img = $('<img src="'+ settings.blankImg+'" alt="" style="filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(sizingMethod=\'scale\',src=\''+val+'\');" />');
}
//针对火狐浏览器
if(moz){
var obj = document.getElementById('file_'+i);
var img = $('<img src="'+obj.files[0].getAsDataURL()+'" alt="" width="75" />');
}
imgWrap.empty().append(img);
}else{
imgWrap.empty().append(defImg);
mes.html(settings.error);
}
});
})
}
})(jQuery)
注意，在上面的代码中，我先定义的是图片不能正常显示的情况，然后对不同浏览器做不同处理。使用起来很简单，在页面的头部引入jquery库和jQuery. liveFakeFile插件，假如页面中有一个class为”.fake”的文本框，只需调用一下代码即可：
<script type="text/javascript">;
$(function(){
$(".fake").liveFakeFile();
})
</script>;
参数reg、defImg、btnText、blankImg、error、imgText主要用来方便自己定义。如你可以修改，然后调用：
<pre class="brush:javascript">
<script type="text/javascript">;
$(function(){
var obj = {
reg: "bmp",
defImg:'img/yourImg.gif',
btnText:' browse ',
blankImg: "img/blank.gif",
error: Sorry,the format of image is wrong, please select again!',
imgText:'you have select the image:'
}
$(".fake").liveFakeFile(obj);
})
</script>;
五、相关资源：
注：所有转载者需标明原文地址，谢谢！