Self-made File Upload JS Controls Support IE, chrome, firefoxetc_javascript skills

This article mainly introduces the support for IE, chrome, and firefoxetc for self-made File Upload JS controls. For more information, see The Code is as follows:

(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 = $ ('');
$ 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.tar get = 'uploadframework ';
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 );
};
})();