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

  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 = $('<iframe id="uploadFrame" width="0" height="0" name="uploadFrame" src=""></iframe>');
 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 })();

 

<form enctype="multipart/form-data" id="ctl01" action="Default.aspx" method="post">