Use JQuery Ajax For File Upload
I am wondering if it is possible to use the jquery framework to make an ajax server side call and upload a file. Here is my html:
-
<form name="uploadForm" enctype="multipart/form-data" action="" method="post">
<strong>Upload Image:</strong> <input name="fileField" id="fileField" type="file" size="45" />
<input type="button" value="Upload Image" id="upload_image" onclick="submit(this.form);" />
</form>
I am using PHP as my server side language and having trouble with an ajax call, because the global $_FILES is null with the ajax call, but when I do a standard page reload using submit(this.form) the $_FILES array is populated with the file. Basically is there a special property or snytax to use in jquery?
Here is my ajax function, which inside of the button onclick=submit(this.form) becomes: Requests.ajax('upload.php', { param: somethinghere }, function() { alert("did I work?"); });
-
var Requests = {
////
// Required Parameters: p_ServerSidePage, p_Data, p_SuccessCallbackFunction
// Optional Parameters: p_Timeout, p_Cache, p_Type, p_DataType
////
ajax : function(p_ServerSidePage, p_Data, p_SuccessCallbackFunction, p_Timeout, p_Cache, p_Type, p_DataType) {
if(typeof(p_Timeout) == "undefined") {
p_Timeout = 1000;
}
if(typeof(p_Cache) == "undefined") {
p_Cache = false;
}
if(typeof(p_Type) == "undefined") {
p_Type = "post";
}
if(typeof(p_DataType) == "undefined") {
p_DataType = "text";
}
$.ajax(
{
url: p_ServerSidePage,
data: p_Data,
timeout: p_Timeout,
cache: p_Cache,
type: p_Type,
dataType: p_DataType,
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Oops! " + errorThrown);
},
success: p_SuccessCallbackFunction
});
}
}