/*
插件名:文件異步上傳
作者:sgp
時(shí)間:2011年5月2號
博客:http://hi.baidu.com/song_88236944/home
版本:1.0
*/
(function( $ ){
if ($.sgpUploadFile) return false; //防止JS重復(fù)加載
$.fn.sgpUploadFile = function(options) {
///// 參數(shù)
var settings={
'divID':'upload_file', //指定一個(gè)div
'type':'img', //上傳類型 img:圖片 file : 文件
'fold':'file', //指定上傳的文件夾
'count':1 //指定一初始化N個(gè)上傳控件
};
////// 假如參數(shù)有填的話那么就匹配,沒有就使用默認(rè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();
}
};
///// 實(shí)現(xiàn)方法
$.sgpUploadFile=function(_div,options){
///// 發(fā)現(xiàn)一個(gè)問題,因?yàn)槟J(rèn)參數(shù)是寫在上面的,那在使用這個(gè)插件時(shí),沒有給這個(gè)參數(shù)賦值那么就取不到。
///// 咱可以將參數(shù)寫在這里。
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+"/" /> <input type=/"button/" id=/"sgp_delete_"+numb+"/" value=/"刪除/" /> <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",
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>
咱的第一個(gè)jQuery插件,有空再加上進(jìn)度條。
聯(lián)系客服