自制的文件上传JS控件可支持IE、chrome、firefoxetc
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);
};
})();
相关文章
- jquery.tmpl.js使用[通俗易懂]
- js内存机制
- JS黑科技:水印防删
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- js取整数、取余数的方法详解编程语言
- 创建JS文件:在Linux下实现自动化任务(linux创建js文件)
- MacOS Chrome:畅享高效浏览体验(macos chrome)
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- JS技术连接Oracle数据库实现数据交互(js连接oracle实例)
- 非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]
- JS参数传递的实际应用代码分析
- js兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
- CSS和JS标签style属性对照表(方便js开发的朋友)
- js中document.getElementByid、document.all和document.layers区分介绍
- js延迟加载改变JS的位置加快网页加载速度
- js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
- js仿百度贴吧验证码特效实例代码
- 自己使用js/jquery写的一个定制对话框控件
- js正则表达式中的单行模式与多行模式实例分析