自制的文件上传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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js对象基础实例分析
Jan 13 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 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
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
angular6的table组件开发的实现示例
2018/12/26 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Django admin组件的使用
2020/10/24 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
华为的Java面试题
2014/03/07 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
公司合作意向书范文
2014/07/30 职场文书
2014年度工作总结报告
2014/12/15 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电