/jquery-upload-file

jQuery Upload File plugin provides Multiple file Uploads with progress bar.Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

Primary LanguageJavaScriptMIT LicenseMIT

#jQuery Upload File

##Overview jQuery Upload File plugin provides Multiple file Uploads with progress bar.Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

#Demo http://hayageek.com/docs/jquery-upload-file.php

#Supported Browsers IE 8.0,IE 9.0,IE 10.0,Firefox,Safari,Opera,Chrome

Drag drop is supported in IE10,Firefox,Safari,Opera,Chrome

##API

###uploadFile( options ) Creates Ajax form and uploads the files to server.

var uploadObj = $("#uploadDivId").uploadFile(options);

###startUpload() uploads all the selected files. This function is used when autoSubmit option is set to false.

uploadObj.startUpload();

###stopUpload() Aborts all the uploads

uploadObj.stopUpload();

#getResponses() Responses from the server are collected and returned.

uploadObj.getResponses()

##Options

###url Server URL which handles File uploads

###method Upload Form method type POST or GET. Default is POST

###enctype Upload Form enctype. Default is multipart/form-data.

###formData An object that should be send with file upload. data: { key1: 'value1', key2: 'value2' }

###dynamicFormData To provide form data dynamically

dynamicFormData: function()
{
    //var data ="XYZ=1&ABCD=2";
    var data ={"XYZ":1,"ABCD":2};
	return data;    	
}

###maxFileSize Allowed Maximum file Size in bytes.

###returnType Expected data type of the response. One of: null, 'xml', 'script', or 'json'. The dataType option provides a means for specifying how the server response should be handled. This maps directly to jQuery's dataType method. The following values are supported:

  • 'xml': server response is treated as XML and the 'success' callback method, if specified, will be passed the responseXML value
  • 'json': server response will be evaluted and passed to the 'success' callback, if specified
  • 'script': server response is evaluated in the global context

###allowedTypes List of comma separated file extensions: Default is "*". Example: "jpg,png,gif"

###fileName Name of the file input field. Default is file

###multiple If it is set to true, multiple file selection is allowed. Default isfalse

###dragDrop Drag drop is enabled if it is set to true

###autoSubmit
If it is set to true, files are uploaded automatically. Otherwise you need to call .startUpload function. Default istrue

###showCancel If it is set to false, Cancel button is hidden when autoSubmit is false. Default istrue

###showAbort
If it is set to false, Abort button is hidden when the upload is in progress. Default istrue

###showDone
If it is set to false, Done button is hidden when the upload is completed. Default istrue

###showDelete If it is set to true, Delete button is shown when the upload is completed. Default isfalse,You need to implement deleteCallback() function.

###showStatusAfterSuccess If it is set to false, status box will be hidden after the upload is done. Default istrue

###showError If it is set to false, Errors are not shown to user. Default istrue

###onSubmit callback back to be invoked before the file upload.

onSubmit:function(files)
{
	//files : List of files to be uploaded
	//return flase;   to stop upload
}

###onSuccess
callback to be invoked when the upload is successful.

onSuccess:function(files,data,xhr)
{
	//files: list of files
	//data: response from server
	//xhr : jquer xhr object
}

###afterUploadAll callback to be invoked when all the files are uploaded.

afterUploadAll:function(obj)
{
	//You can get data of the plugin using obj
}

###onError
callback to be invoked when the upload is failed.

onError: function(files,status,errMsg)
{
	//files: list of files
	//status: error status
	//errMsg: error message
}

###deleteCallback
callback to be invoked when the user clicks on Delete button.

deleteCallback: function(data,pd)
{
	for(var i=0;i<data.length;i++)
	{
	 	$.post("delete.php",{op:"delete",name:data[i]},
	    function(resp, textStatus, jqXHR)
	    {
			//Show Message	
			alert("File Deleted");	    
	    });
	 }		
	pd.statusbar.hide(); //You choice to hide/not.

}