SoFunction
Updated on 2025-03-04

Detailed explanation of how to use jQuery upload file plug-in

The plugin uploadify is written based on the jquery library in js. Combining ajax and flash, this multi-threaded upload function is implemented.

The latest version is now 3.2.1.

Online examples

Please download the php file used in the example below the page

Introduce files

  • <link rel="stylesheet" type="text/css" href="" />
  • <script type="text/javascript" src=""></script>
  • <script type="text/javascript" src=""></script>

How to use

 &lt;form&gt;
 &lt;div &gt;&lt;/div&gt;
 &lt;input  name="file_upload" type="file" multiple="true"&gt;
 &lt;/form&gt;
 &lt;div &gt;&lt;/div&gt; 
&lt;div  style="clear:both"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var timestamp = new Date().getTime();
var token = (() * 1000) + timestamp;
$(function() {
 $('#file_upload').uploadify({
 'buttonText': 'Select file...',
 'fileObjName': 'simplefile',
 'method': 'post',
 'multi': true,
 'queueID': 'fileQueue',
 //'uploadLimit': 2,
 'fileTypeExts': '*.gif;*.png;*.jpg;*.bmp;*.jpeg;',
 'buttonImage': '/static/js/uploadify/',
 'formData': {
 'timestamp': timestamp,
 'token': token
 },
 'swf': '/static/js/uploadify/',
 'uploader': '/static/php/',
 'onUploadStart': function() {
 $imgHtml = '&lt;img class="upload_load" src="/static/images/" align="absmiddle" /&gt;';
 $('#uploadfiles').append($imgHtml);
 },
 'onUploadSuccess': function(file, data, response) {
 $('.upload_load').remove();
 var json = $.parseJSON(data);
 if ( == 'success') {
 $imgHtml = '&lt;span &gt;';
 $imgHtml += '&lt;a href="' +  + '" target="_blank"&gt;';
 $imgHtml += '&lt;img src="' +  + '" width="100" height="100" align="absmiddle"/&gt;';
 $imgHtml += '&lt;/a&gt;';
 $imgHtml += '&lt;a href="javascript:uploadifyRemove(&amp;quot;' +  + '&amp;quot;)"&gt;delete&lt;/a&gt;';
 $imgHtml += '&lt;/span&gt;';
 $($imgHtml).appendTo('#uploadfiles');
 } else {
 alert();
 }
 },
 'onQueueComplete': function() {
 $('.upload_load').remove();
 }
 });
}); 
&lt;/script&gt;

Parameter description

1. Attributes
Attribute name default value illustrate
auto true Set to true. After selecting the file, it will be uploaded directly. For false, you need to click the upload button to upload.
buttonClass ” Button style
buttonCursor ‘hand' The mouse pointer looks like hovering over the button
buttonImage null Path to the image of the browse button.
buttonText ‘SELECT FILES' Browse the text of the button.
checkExisting false File upload repetitive checking program to check whether the upcoming file already exists on the server side. If it exists, it will return 1, and if it does not exist, it will return 0.
debug false If set to true, it means that SWFUpload is enabled for debugging mode
fileObjName ‘Filedata' The name of the file upload object. If named 'the_files', the PHP program can use $_FILES['the_files'] to process the uploaded file object.
fileSizeLimit 0

The size limit for uploading files. If it is an integer, it means the size in KB. If it is a string, it can be used (B, KB, MB, or GB), such as '2MB';

If set to 0, it means no limit
fileTypeDesc ‘All Files' This property value must be set before it is valid before it is valid. It is used to set the prompt text in the selection file dialog box. For example, set fileTypeDesc to "Please select rar doc pdf file"
fileTypeExts ‘*.*' Set the type of file that can be selected, format such as: '*.doc;*.pdf;*.rar'.
formData   The additional data submitted to the server while uploading each file in JSON format can be dynamically set using the 'settings' method in the 'onUploadStart' event.
height 30 Set the height of the browsing button, default value
itemTemplate false For HTML templates used to set up upload queues, you can use the following tags:
instanceID – ID of Uploadify instance
fileID – The ID of this file in queue, or the ID understood as this task
fileName – the name of the file
fileSize – The size of the currently uploaded file
When inserting template tags, use formats such as: ${fileName}
method Post Submission method Post or Get
multi true Multiple files can be uploaded when set to true.
overrideEvents   Set which events can be rewritten, JSON format, such as: 'overrideEvents': ['onUploadProgress']
preventCaching true If true, a string of random string parameters will be automatically added every time the file is uploaded to prevent URL cache from affecting the upload result
progressData ‘percentage' Set the upload progress display method, percentage displays the upload percentage, speed displays the upload speed
queueID false Set the ID of the upload queue container DOM element. If false, a queue container will be automatically generated.
queueSizeLimit 999 The maximum number of tasks displayed in the queue. If the number of selected files exceeds this limit, the onSelectError event will be initiated.
Note that this item is not the maximum number of file uploads. If you want to limit the maximum number of uploaded files, you should set uploadLimit.
removeCompleted true Whether to automatically delete completed tasks from the queue, if set to false, this task display will be kept forever.
removeTimeout 3 If you set to automatically remove from the queue after the task is completed, the time interval from completion to removal can be specified.
requeueErrors false If set to true, an error will be returned after a single task upload fails and the task queue will be rejoined.
successTimeout 30 After the file upload is successful, the server should return the success flag. This setting the timeout time for the return result.
swf ‘' The relative path to the file.
uploader The relative path to the background handler.
uploadLimit 999 Maximum number of uploaded files, if this limit is reached or exceeded, the onUploadError event will be triggered.
width 120 Sets the width of the file browsing button.

2. Events
Event name illustrate
onCancel(file)

When the file close button in the file queue is clicked or the file is clicked to cancel upload, the file parameter is the file object that was cancelled upload
onClearQueue(queueItemCount) When the cancel method of the function is called, the queueItemCount parameter is the number of files that have been canceled.
onDestroy() Triggered when the Destory method is called
onDialogClose(queueData)

Fired when the file browsing box is closed, if this event is rewritten, an error message prompt will not pop up when an error occurs when an error is added to the queue upload.

The queueData object contains the following properties:

  • filesSelected How many files have been selected in the file selection dialog box
  • filesQueued How many files have been added to the queue
  • filesReplaced How many files have been replaced in the queue
  • filesCancelled How many files were canceled filesErrored How many files were wrong
onDialogOpen() Depart immediately when the file selection dialog pops up, but may not be executed all until the file selection dialog is closed.
onDisable() Triggered when the disable method disables the Uploadify upload button.
onEnable() Triggered when the disable method enables the Uploadify button.
onFallback() Fired when the current browser does not support flash during the Uploadify initialization process.
onInit() Triggered when the first initialization of Uploadify ends.
onQueueComplete(queueData)

The file upload queue is fired after processing.

The queueData object contains the following properties:

  • uploadsSuccessful – Number of files that have been uploaded successfully
  • uploadsErrored – Number of files that failed to upload
onSelect(file)

This will fire when adding each upload task to the queue after selecting a file.
onSelectError(file, errorCode, errorMsg)

If a file is selected, it will be triggered if it fails.

file – file object

errorCode – The error code is as follows:

  • QUEUE_LIMIT_EXCEEDED – The number of tasks exceeds the queue limit;
  • FILE_EXCEEDS_SIZE_LIMIT – File size exceeds the limit;
  • ZERO_BYTE_FILE – File size is 0
  • INVALID_FILETYPE – File type does not meet the requirements

errorMsg – Error prompt, can be customized through ''
onSWFReady() Flash file is fired after successful loading.
onUploadComplete(file) Each file will be triggered regardless of success or not after uploading.
onUploadError(file, errorCode, errorMsg, errorString) It is triggered when a file upload error occurs, and the parameters are returned by the server program.
onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)

This event will be triggered multiple times during the process of processing the upload queue, and will be triggered whenever the task status is updated.

  • file – file object
  • bytesUploaded – Number of uploaded bytes
  • bytesTotal – Total file bytes
  • totalBytesUploaded – The total number of bytes uploaded by all files in the current task queue
  • totalBytesTotal – Total bytes of all files in the current task queue
onUploadStart(file) Triggered immediately when the file is about to start uploading
onUploadSuccess(file, data, response)

Triggered when file upload is successful

  • file – file object
  • data – The information returned by the server output
response – true when there is output, if there is no response, if false, if the returned is false, it is assumed to be true after the time set by successTimeout is exceeded

3. Method
Method name illustrate Application examples
cancel(fileID, suppressEvent)

Cancel the task in the queue regardless of whether the task has started uploading or not

  • fileID – The file ID to cancel, if empty, cancel the first task in the queue, and if '*', cancel all tasks
  • suppressEvent – ​​Whether to prevent the onUploadCancel event from being triggered, very practical when clearing the queue.
  1. <ahref="javascript:$(‘#file_upload').uploadify(‘cancel')">
  2. Cancel the first one</a>
  3. <a
  4. href="javascript:$(‘#file_upload').uploadify(‘cancel',
  5. ‘*')">Clear the queue</a>
  6. <a
  7. href="javascript:$(‘#file_upload').uploadify(‘upload',
  8. ‘*')">Start uploading all tasks</a>
destroy() Destroy Uploadify instance and restore file upload button to its original state
  1. <a
  2. href="javascript:$(‘#file_upload').uploadify(‘destroy')">
  3. Destroy Uploadify instance</a>
disable(setDisabled)

Disable or enable file browsing buttons

setDisabled – Set to true means disabled, false is enabled
  1. <a
  2. href="javascript:$(‘#file_upload').uploadify(‘disable',
  3. true)">Disable button</a>
  4. <a
  5. href="javascript:$(‘#file_upload').uploadify(‘disable',
  6. false)">Enable button</a>
settings(name, value, resetObjects)

Get or set Uploadify instance parameters

  • name – attribute name, if only attribute name is provided, it means to get its value
  • value – property value
  • resetObjects – Updating the postData object will clear the existing value when set to true. Otherwise, the new value will be added to the end of it.
  1. $(‘#file_upload').uploadify(‘settings','buttonText','BROWSE');
  2. $(‘#file_upload').uploadify(‘settings','buttonText'));
stop() Stop the currently uploaded task
  1. <a
  2. href="javascript:$(‘#file_upload').uploadify(‘upload',
  3. ‘*')">Start uploading</a>
  4. <a
  5. href="javascript:$(‘#file_upload').uploadify(‘stop')">
  6. Stop uploading</a>
upload(fileID) Upload the specified file immediately. If the fileID is '*' means uploading all files. To specify uploading multiple files, the fileID of each file is used as a parameter.
  1. <a
  2. href="javascript:$(‘#file_upload').uploadify(‘upload','*')">
  3. Start uploading all texts</a>

File download

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!