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


Posted in Javascript onApril 18, 2014
(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() { 
var obj = this; 
$('#' + this.id).change(function () { 
if (obj.autoUpload) { 
obj.upload(); 
} 
}); 
if (this.supportsFormData()) { 
if (this.dropId != null) { 
var drop = $('#' + 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() { 
return window.FormData != undefined; 
}; 
FileUpload.prototype.upload = function() { 
if (this.supportsFormData()) { 
this._uploadUsingFormData($("#" + this.id)[0].files[0]); 
} else { 
this._uploadUsingFrame(); 
} 
}; 
FileUpload.prototype._uploadUsingFrame = function() { 
var obj = this; 
var $frame = $('#uploadFrame'); 
if ($frame.length == 0) { 
$frame = $('<iframe id="uploadFrame" width="0" height="0" name="uploadFrame" src=""></iframe>'); 
$frame.appendTo("body"); 
$frame.load(function() { 
var response = $frame.contents().text(); 
try { 
var json = $.parseJSON(response); 
$(obj).trigger("onLoad", json); 
} catch(ex) { 
$(obj).trigger("onError", response); 
} 
}); 
} 
var form = $("#" + this.id).closest("form")[0]; 
form.target = 'uploadFrame'; 
form.submit(); 
}; 
FileUpload.prototype._uploadUsingFormData = function (file) { 
var obj = this; 
var xhr = new XMLHttpRequest(); 
xhr.addEventListener("load", function (e) { 
var json = $.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) { 
var name = file.name; 
var ext = name.substring(name.lastIndexOf("."), name.length).toLowerCase(); 
if (obj.extensions.indexOf(ext) < 0) { 
$(obj).trigger("onExtensionError"); 
return; 
} 
} 
var formData = new FormData(); 
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); 
}; 
})();
Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 #Javascript
JQuery each()嵌套使用小结
Apr 18 #Javascript
JavaScript编程的10个实用小技巧
Apr 18 #Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 #Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 #Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 #Javascript
jQuery模拟点击A标记示例参考
Apr 17 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
由Javascript实现的页面日历
2011/11/04 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python模拟登录12306的方法
2014/12/30 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python 错误和异常代码详解
2018/01/29 Python
python事件驱动event实现详解
2018/11/21 Python
在django模板中实现超链接配置
2019/08/21 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python实现用户名密码校验
2020/03/18 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
农场厂长岗位职责
2013/12/28 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
刑事辩护词范文
2015/05/21 职场文书