is00hcw / jquery-upload-file Goto Github PK

#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();

###cancelAll() Cancel all the selected files ( when autoSubmit:false)

uploadObj.cancelAll();

#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.

###maxFileCount Allowed Maximum number of files to be uploaded

###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"

###acceptFiles accept MIME type for file browse dialog. Default is "". Example: "image/"
check this for full list : http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv

###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.

###showDownload If it is set to true, Download button is shown when the upload is completed. Default isfalse,You need to implement downloadCallback() 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

###showFileCounter If it is set to true, File counter is shown with name. Default istrue File Counter style can be changed using fileCounterStyle. Default is ).

###showProgress If it is set to true, Progress precent is shown to user. Default isfalse

###showPreivew If it is set to true, preview is shown to images. Default isfalse

###previewHeight is used to set preview height. Default is : "auto"

###previewWidth is used to set preview width. Default :"100%"

###showQueueDiv Using this you can place the progressbar wherever you want.

showQueueDiv: "output"

progress bar is added to a div with id output

uploadObj.update({autoSubmit:true,maxFileCount:3,showDownload:false});

    onLoad:function(obj)
    {
    	$.ajax({
	    	cache: false,
		    url: "load.php",
	    	dataType: "json",
		    success: function(data) 
		    {
			    for(var i=0;i<data.length;i++)
    	    	{
        			obj.createProgress(data[i]);
        		}
	        }
		});
   },

onSelect:function(files)
{
	files[0].name;
	files[0].size;
	return true; //to allow file submission.
}

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

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

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

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

onCancel: function(files,pd)
{
	//files: list of files
	//pd:  progress div
}

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.

}

downloadCallback:function(files,pd)
{
	location.href="download.php?filename="+files[0];
}

{"jquery-upload-file-error":"File already exists"}