自制文件上传JS控件，支持IE、chrome、firefoxetc.

1 (function() {
2 if (window.FileUpload) {
3 return;
4 }
5 window.FileUpload = function (id, url) {
6 this.id = id;
7 this.autoUpload = true;
8 this.url = url;
9 this.maxSize = null;
10 this.extensiOns= null;
11 this.dropId = null;
12 };
13
14 window.FileUpload.prototype.init = function() {
15 var obj = this;
16 $(‘#‘ + this.id).change(function () {
17 if (obj.autoUpload) {
18 obj.upload();
19 }
20 });
21 if (this.supportsFormData()) {
22 if (this.dropId != null) {
23 var drop = $(‘#‘ + this.dropId)[0];
24 drop.addEventListener("dragover", function(e) {
25 e.stopPropagation();
26 e.preventDefault();
27 $(‘#‘ + obj.dropId).addClass("dragover");
28 }, false);
29 drop.addEventListener("dragout", function(e) {
30 $(‘#‘ + obj.dropId).removeClass("dragover");
31 }, false);
32 drop.addEventListener("drop", function(e) {
33 e.stopPropagation();
34 e.preventDefault();
35 $(‘#‘ + obj.dropId).removeClass("dragover");
36 obj._uploadUsingFormData(e.dataTransfer.files[0]);
37 }, false);
38 }
39 } else {
40 if (this.dropId != null) {
41 $(‘#‘ + this.dropId).hide();
42 }
43 }
44 };
45
46 FileUpload.prototype.supportsFormData = function() {
47 return window.FormData != undefined;
48 };
49
50 FileUpload.prototype.upload = function() {
51 if (this.supportsFormData()) {
52 this._uploadUsingFormData($("#" + this.id)[0].files[0]);
53 } else {
54 this._uploadUsingFrame();
55 }
56 };
57
58 FileUpload.prototype._uploadUsingFrame = function() {
59 var obj = this;
60 var $frame = $(‘#uploadFrame‘);
61 if ($frame.length == 0) {
62 $frame = $(‘‘);
63 $frame.appendTo("body");
64 $frame.load(function() {
65 var respOnse= $frame.contents().text();
66 try {
67 var json = $.parseJSON(response);
68 $(obj).trigger("onLoad", json);
69 } catch(ex) {
70 $(obj).trigger("onError", response);
71 }
72 });
73 }
74 var form = $("#" + this.id).closest("form")[0];
75 form.target = ‘uploadFrame‘;
76 form.submit();
77 };
78
79 FileUpload.prototype._uploadUsingFormData = function (file) {
80 var obj = this;
81 var xhr = new XMLHttpRequest();
82 xhr.addEventListener("load", function (e) {
83 var json = $.parseJSON(xhr.response);
84 $(obj).trigger("onLoad", json);
85 }, false);
86 xhr.addEventListener("error", function (e) {
87 $(obj).trigger("onError", e);
88 }, false);
89 xhr.upload.addEventListener("progress", function (e) {
90 if (e.lengthComputable) {
91 $(obj).trigger("onProgress", e.loaded, e.total);
92 }
93 }, false);
94 xhr.open("POST", obj.url);
95
96 if (obj.maxSize != null&&file.size>obj.maxSize) {
97 $(obj).trigger("onMaxSizeError");
98 return;
99 }
100 if (obj.extensions != null) {
101 var name = file.name;
102 var ext = name.substring(name.lastIndexOf("."), name.length).toLowerCase();
103 if (obj.extensions.indexOf(ext) <0) {
104 $(obj).trigger("onExtensionError");
105 return;
106 }
107 }
108 var formData = new FormData();
109 formData.append("files", file);
110 xhr.send(formData);
111 };
112
113 FileUpload.prototype.OnLoad= function(handler) {
114 $(this).bind("onLoad", function(sender, args) {
115 handler && handler(args);
116 });
117 };
118
119 FileUpload.prototype.OnProgress= function (handler) {
120 $(this).bind("onProgress", function(sender, loaded, total) {
121 handler && handler(loaded, total);
122 });
123 };
124
125 FileUpload.prototype.OnError= function (handler) {
126 $(this).bind("onError", function(sender, error) {
127 handler && handler(error);
128 });
129 };
130
131 FileUpload.prototype.OnMaxSizeError= function(handler) {
132 $(this).bind("onMaxSizeError", handler);
133 };
134
135 FileUpload.prototype.OnExtensionError= function (handler) {
136 $(this).bind("onExtensionError", handler);
137 };
138 })();