发布于 2017-01-16 04:27:47 | 132 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了自制的文件上传JS控件可支持IE、chrome、firefox etc,需要的朋友可以参考下
 
(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); 
}; 
})(); 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务