中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

四、jQuery. liveFakeFile核心代碼：

關(guān)于如何創(chuàng)建jQuery插件，這里不做介紹，你可以去官方網(wǎng)站查看相關(guān)資料,代碼如下：

(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:'你已經(jīng)選擇文件'
 };
 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插件，假如頁面中有一個(gè)class為”.fake”的文本框，只需調(diào)用一下代碼即可：

<script type="text/javascript">;
$(function(){
$(".fake").liveFakeFile();
})
</script>;

參數(shù)reg、defImg、btnText、blankImg、error、imgText主要用來方便自己定義。如你可以修改，然后調(diào)用：

<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>;

查看demo

五、相關(guān)資源：

• 參考文章：Styling an input type=”file”
• 示例下載： jQuery. liveFakeFile.rar
• 原文地址：http://www.denisdeng.com/?p=348

注：所有轉(zhuǎn)載者需標(biāo)明原文地址，謝謝！

本文鏈接：http://m.95time.cn/tech/web/2009/6944.asp　

出處：
責(zé)任編輯：bluehearts

上一頁 使用jQuery改進(jìn)文件上傳控件 [2] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。