异步上传jQuery插件

/*
    插件名：文件异步上传
   
    作者：sgp
    时间：2011年5月2号
    博客：http://hi.baidu.com/song_88236944/home
    版本：1.0
*/

(function( $ ){
   
    if ($.sgpUploadFile) return false; //防止JS重复加载
   
    $.fn.sgpUploadFile = function(options) {
        /////   参数
        var settings={
            'divID':'upload_file',  //指定一个div
            'type':'img',           //上传类型 img:图片 file : 文件
            'fold':'file',          //指定上传的文件夹
            'count':1               //指定一初始化N个上传控件   
        };       
       
        //////   假如参数有填的话那么就匹配，没有就使用默认
        if(options){
            $.extend(settings,options);
        }
       
        if(!this.sgpUploadFile)
        {
            var upload = new $.sgpUploadFile(this, options);
            if (upload.init()) {
                        this.uploadFile = upload;
                    }
            else upload = null;
        }
        else
        {
            var upload = new $.sgpUploadFile(this, options);
            upload.init();
        }
      
    };
   
    /////   实现方法
    $.sgpUploadFile=function(_div,options){
   
   
        /////  发现一个问题，因为默认参数是写在上面的，那在使用这个插件时，没有给这个参数赋值那么就取不到。
        /////  咱可以将参数写在这里。
        var _this=this;
       
        this.init = function() {

            //alert(options.count);
            //alert(options.divID);
       
            for(var i=0;i<options.count;i++)
            {
                _this.show_upload(i,options.divID);
            }
        }
       
        //////   显示上传的模块
        this.show_upload=function(numb,_target){
       
            //alert(_target);
       
            var form_content="<div id=/"sgp_uploadDiv_"+numb+"/"><form action=/"ajax/fileUpload.ashx/" id=/"sgp_form_"+numb+"/" name=/"sgp_form_"+numb+"/" enctype=/"multipart/form-data/" method=/"post/" target=/"sgp_iframe_"+numb+"/"><input type=/"file/" name=/"upFile/" id=/"sgp_upload_"+numb+"/" /></form>";
            var iframe_content="<iframe name=/"sgp_iframe_"+numb+"/" id=/"sgp_iframe_"+numb+"/" frameborder=0 style=/"width:0px;height:0px;/"></iframe></div>";
           
            jQuery("#"+_target).append(form_content+"<br/>"+iframe_content+"<div id=/"info_"+numb+"/" style=/"display:none/"></div>");
           
            ///////      文件选择后
            jQuery("#sgp_upload_"+numb).bind("change",function(){
                //////   上传
                _this.submit_file(numb,_target);
            });
           
            ///////     上传完成
            jQuery("#sgp_iframe_"+numb).bind("load",function(){
                _this.after_upload(numb,_target);
            });
           
        }
       
        //////  上传文件
        this.submit_file=function(numb,_target){
       
            jQuery("#info_"+numb).show();
            jQuery("#info_"+numb).html("<img src='/images/load.gif' />");
            jQuery("#sgp_form_"+numb).submit();
            jQuery("#sgp_form_"+numb).hide();
           
        }
       
        /////     上传成功之后
        this.after_upload=function(numb,_target){
            var html_content=jQuery("#sgp_iframe_"+numb).contents().find("body").html();
           
            if(html_content.indexOf(options.fold+"/")==0)
            {  
                //jQuery("#info_"+numb).show();
                jQuery("#info_"+numb).html("<img id=/"sgp_img_"+numb+"/" src=/""+html_content+"/"  />&nbsp;&nbsp;<input type=/"button/" id=/"sgp_delete_"+numb+"/" value=/"删除/" />&nbsp;&nbsp;<input type=/"button/" id=/"sgp_reLoad_"+numb+"/" value=/"重新上传/" /> ");
               
                /////   绑定删除事件
                jQuery("#sgp_delete_"+numb).bind("click",function(){
                    _this.deleteFile(numb,_target);
                   
                });
               
                //////   绑定重新上传事件
                jQuery("#sgp_reLoad_"+numb).bind("click",function(){
                    //////    1，删除
                    _this.deleteFile(numb,_target);
                    //////    2，显示界面
                    _this.reShowFile(numb,_target);
                })
            }
            else
            {
                ///////     原装
                _this.reShowFile(numb,_target);
            }
        }
       
        //////  删除文件
        this.deleteFile=function(_numb,_target){
            var fileName=jQuery("#sgp_img_"+_numb).attr("src");
           
            var index_fold=fileName.indexOf(options.fold+"/");
            if(index_fold!=0)
                fileName=fileName.substring(index_fold);

            //alert(fileName);
            jQuery.ajax({
                type:"POST",
                url:"/ajax/deleteFile.ashx",
                data:"fileName="+fileName,
                success:function(msg){
                    ///   显示上传模块       
                    _this.reShowFile(_numb,_target);
                }
            });
        }
       
        //////  再次显示某上传模块
        this.reShowFile=function(numb,_target){
            jQuery("#info_"+numb).hide();
            jQuery("#sgp_form_"+numb).show();
           
            /////   清空上传文件控件值
            jQuery("#sgp_upload_"+numb).val("");
        }
    }
   

})(jQuery);

 

------------------------------------------

页面引用

 

<script src="javascript/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="javascript/sgpUploadFile.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#upload_file").sgpUploadFile({count:3,divID:'upload_file',fold:'file'});
        });
    </script>

 

 

咱的第一个jQuery插件，有空再加上进度条。