zl程序教程

您现在的位置是:首页 >  后端

当前栏目

自制的文件上传JS控件可支持IE、chrome、firefoxetc

JSChrome文件上传 支持 控件 IE 自制
2023-06-13 09:15:25 时间
复制代码代码如下:

(function(){
if(window.FileUpload){
return;
}
window.FileUpload=function(id,url){
this.id=id;
this.autoUpload=true;
this.url=url;
this.maxSize=null;
this.extensions=null;
this.dropId=null;
};

window.FileUpload.prototype.init=function(){
varobj=this;
$("#"+this.id).change(function(){
if(obj.autoUpload){
obj.upload();
}
});
if(this.supportsFormData()){
if(this.dropId!=null){
vardrop=$("#"+this.dropId)[0];
drop.addEventListener("dragover",function(e){
e.stopPropagation();
e.preventDefault();
$("#"+obj.dropId).addClass("dragover");
},false);
drop.addEventListener("dragout",function(e){
$("#"+obj.dropId).removeClass("dragover");
},false);
drop.addEventListener("drop",function(e){
e.stopPropagation();
e.preventDefault();
$("#"+obj.dropId).removeClass("dragover");
obj._uploadUsingFormData(e.dataTransfer.files[0]);
},false);
}
}else{
if(this.dropId!=null){
$("#"+this.dropId).hide();
}
}
};

FileUpload.prototype.supportsFormData=function(){
returnwindow.FormData!=undefined;
};

FileUpload.prototype.upload=function(){
if(this.supportsFormData()){
this._uploadUsingFormData($("#"+this.id)[0].files[0]);
}else{
this._uploadUsingFrame();
}
};

FileUpload.prototype._uploadUsingFrame=function(){
varobj=this;
var$frame=$("#uploadFrame");
if($frame.length==0){
$frame=$("<iframeid="uploadFrame"width="0"height="0"name="uploadFrame"src=""></iframe>");
$frame.appendTo("body");
$frame.load(function(){
varresponse=$frame.contents().text();
try{
varjson=$.parseJSON(response);
$(obj).trigger("onLoad",json);
}catch(ex){
$(obj).trigger("onError",response);
}
});
}
varform=$("#"+this.id).closest("form")[0];
form.target="uploadFrame";
form.submit();
};

FileUpload.prototype._uploadUsingFormData=function(file){
varobj=this;
varxhr=newXMLHttpRequest();
xhr.addEventListener("load",function(e){
varjson=$.parseJSON(xhr.response);
$(obj).trigger("onLoad",json);
},false);
xhr.addEventListener("error",function(e){
$(obj).trigger("onError",e);
},false);
xhr.upload.addEventListener("progress",function(e){
if(e.lengthComputable){
$(obj).trigger("onProgress",e.loaded,e.total);
}
},false);
xhr.open("POST",obj.url);

if(obj.maxSize!=null&&file.size>obj.maxSize){
$(obj).trigger("onMaxSizeError");
return;
}
if(obj.extensions!=null){
varname=file.name;
varext=name.substring(name.lastIndexOf("."),name.length).toLowerCase();
if(obj.extensions.indexOf(ext)<0){
$(obj).trigger("onExtensionError");
return;
}
}
varformData=newFormData();
formData.append("files",file);
xhr.send(formData);
};

FileUpload.prototype.onLoad=function(handler){
$(this).bind("onLoad",function(sender,args){
handler&&handler(args);
});
};

FileUpload.prototype.onProgress=function(handler){
$(this).bind("onProgress",function(sender,loaded,total){
handler&&handler(loaded,total);
});
};

FileUpload.prototype.onError=function(handler){
$(this).bind("onError",function(sender,error){
handler&&handler(error);
});
};

FileUpload.prototype.onMaxSizeError=function(handler){
$(this).bind("onMaxSizeError",handler);
};

FileUpload.prototype.onExtensionError=function(handler){
$(this).bind("onExtensionError",handler);
};
})();