首页 / 脚本样式 / JavaScript / 自制的文件上传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）;
};
}）（）;