The examples below cannot be used with file uploads inside a form. To submit form with file uploads, see the example
Submitting HTML Forms With AJAX.
To upload a file asynchronously, we need a cgi script. You have to move upload.cgi found in your download, to a directory where cgi scripts are allowed.
For example; in most servers, there is a "cgi-bin" folder to do it. Note that it must be executable. If you work in your local, you need "PERL"
installed. Please, read the instructions in the readme.txt file for that.
cgi_path:upload.cgi file path. Give attention to enter the correct path.
tmp_dir: a writable directory path for auto created temporary files. It must be in the same directory with upload.cgi or you can change the
$tmp_dir = "tmp"; (line #46-52) line for yourself. Give attention to enter the correct path.
onProgress: A function called during the upload repeatedly between defined interval. Thus, you may create a preloader of your own and call your php upload function
at the end of progress. Function is called with a json object argument progress.
The properties of progress:
id: the id of the file input for the running upload.
total: total size of file in bytes.
uploaded: size of file in bytes uploaded till then.
percent: percent of size of file uploaded till then.
speed: speed of the upload in bytes / second.
completed: is true at the end of progress.
file_tmp_name: temporary name of the uploaded file, available just at the end of progress.
file_name: real name of the uploaded file, available just at the end of progress.
onError: a function called when an error ocurred during the upload. Error code is passed as argument. The error codes are:
PLX.SIZE_ERROR: shows that file size is greater than max_size value.
PLX.TYPE_ERROR: shows that file type is not allowed according to the allowed_types and disallowed_types parameters.
PLX.TEMP_FILE_ERROR: shows that an error ocurred during the creation of temporary files. In this situation, you'd better control tmp_dir parameter.
interval: the time in milliseconds to call onProgress function repeatedly. Default value is 2000 (2 seconds).
insensitivity: takes a float value (default 0.10). It affects on reading rate of file; rate is decreased while it increases, and increased while it decreases. It becomes fastest when it is 0;
but then, most files are uploaded immediately, so preloaders like progress bars, etc. get useless.
max_size: allowed maximum file size in bytes. Default value is equal to 4MB. For security, file size must be controlled in php side.
allowed_types: allowed file types (e.g. ["jpg","gif","png"]). If it's used, an alert is shown when a disallowed file is selected and but it just increases the usefulness. For security,
file types must also be controlled in php side.
disallowed_types: disallowed file types (e.g.: ["exe","bat","bin"]). Inverse of allowed_types parameter.
click_el: true to prevent starting upload just after a file selection, so it can be done via a button, etc. To learn how to use it, see the example #3.
Let's start with a basic example:
Example #1:
Select a file:
% 0
* If you create more than one ajax uploads with the same options, you don't need to call AjaxifyUpload method for each. It may be used like
PLX.AjaxifyUpload(["photo1", "photo2", "photo3"], {...})
PHP codes ahead are also used in following examples.
Example #2:
% 0
% 0
We have seen how simple it is. Let's add more option to the upload and increase the visuality:
Sending Message...
