SWFUpload File Upload Plugin usage detailed

Source: Internet
Author: User
Tags error code

Initialization and configuration of SWFUpload
First, refer to Swfupload.js in the page, such as
<script type= "Text/javascript" src= "Http://www.swfupload.org/swfupload.js" ></script>
Then, initialize the SWFUpload, as
var swfu;
Window.onload = function () {
SWFU = new SWFUpload ({
Upload_url: "http://www.swfupload.org/upload.php",
Flash_url: "http://www.swfupload.org/swfupload_f9.swf", File_size_limit: "20480″
});
};
The following are the parameters required for a standard swfupload initialization setting, which you can cut as needed:
{
Upload_url: "http://www.swfupload.org/upload.php" to handle the server-side script URL of the upload request
File_post_name: "Filedata" is the array name of the past $_files of the Post
Post_params: {
"Post_param_name_1″:" Post_param_value_1″,
"Post_param_name_2″:" Post_param_value_2″,
"Post_param_name_n": "Post_param_value_n"
},
File_Types: "*.jpg;*.gif", file types that allow uploading
File_types_description: "Web Image Files", File type description
File_size_limit: "1024″, upload file volume upper limit, per MB
File_upload_limit:10, limit users to upload a maximum number of files, in the upload process, the number will accumulate, if set to "0", it means no restrictions
File_queue_limit:2, the number of upload queues is limited, this item is usually not required to set, will automatically assign value according to File_upload_limit
Flash_url: "http://www.swfupload.org/swfupload_f9.swf", URL of the Flash control
Flash_width: "1px",
Flash_height: "1px",
Flash_color: "#FFFFFF",
Debug:false, whether to display debugging information
Swfupload_loaded_handler:swfupload_loaded_function, the event handler that fires when the flash control is loaded successfully
File_dialog_start_handler:file_dialog_start_function, the event handler that starts before the File selection dialog box pops up
File_queued_handler:file_queued_function,
File_queue_error_handler:file_queue_error_function,
File_dialog_complete_handler:file_dialog_complete_function event handler that fires when the File selection dialog box closes
Upload_start_handler:upload_start_function, the event handler that triggers before starting the upload file
Upload_progress_handler:upload_progress_function,
Upload_error_handler:upload_error_function,
Upload_success_handler:upload_success_function, event handlers that trigger when a file is uploaded successfully
Upload_complete_handler:upload_complete_function,
Debug_handler:debug_function,
Custom_settings: {Custom settings
Custom_setting_1: "Custom_setting_value_1″,
Custom_setting_2: "Custom_setting_value_2″,
Custom_setting_n: "Custom_setting_value_n",
}
}
[edit this paragraph] The file Object in SWFUpload
In the use of swfupload, whether on the client or server side to deal with the file object, in a file object contains the following:
{
Id:string,//swfupload file ID, used for starting or cancelling and upload
Index:number,//The index of this file is in GetFile (i)
Name:string,//the file name. The path is not included.
Size:number,//The file size in bytes
Type:string,//The file type as reported by the client operating system
Creationdate:date,//The Date the file was created
Modificationdate:date,//The Date the file was last modified
Filestatus:number,//The file ' s current status. Use Swfupload.file_status to interpret the value.
}

The method in SWFUpload
+ Setpostparams (param_object)
-Description
Dynamically modifies the Post_params property in the SWFUpload initialization setting, where all values are overwritten.
-Parameters
Param_object: A simple JavaScript object, all Name/value must be a string, for example (This.setpostparams ({"Mari": Name}).
-Return
void

Events in the SWFUpload
SWFUpload provides a variety of events during the run that allow developers to use handles to change the page UI, change behavior, or report errors. All of these events can be invoked in a swfupload entity, which means that in the corresponding functions of these events, you can use the This keyword instead of referencing the swfupload entity.
+ filedialogcomplete (number of files selected)
-Trigger condition
1. The user chooses to upload the file, and closes the dialog box;
2. Users have nothing to choose from, and cancel the dialog box;
If you want to automatically start uploading after the user chooses to finish the file, you can put the this.startupload () action here.
-Incoming parameters
Number of files selected: Returns the amount of files selected by the user.
+ uploadstart (File object)
-Trigger condition
This event is triggered before the file is uploaded. It is used to accomplish some preparatory work, such as passing parameters; a handle function that responds to the event can have 2 return values (TRUE or FALSE) when the return value is false, the entire upload is canceled, and the upload process continues when the return value is true. If the return value is false, it is usually caused by a uploaderror event.
Note: In the original text of the official help document there is a sentence in the description of the event: "If you return ' true ' or ' does not ' returns any value then the upload proceeds.", from which you can see that the established design is when no value is returned The time should be equivalent to return true, but the author found in the development must explicitly return the value, otherwise the upload process will stop responding, I wonder if it is a bug?
-Incoming parameters
File object: Document objects
+ uploadcomplete (File object)
-Trigger condition
After completing an upload cycle (after uploaderror or uploadsuccess), an upload operation is over and another upload operation can begin.
-Incoming parameters
File object: Document objects
+ uploadprogress (File object, Bytes complete, total bytes)
-Trigger condition
The event is periodically automatically triggered by flash controls during upload of the entire file to help developers update the page UI in real time to make upload progress bars.
Note: This event is problematic in the Linux version of Flash Player and cannot be resolved at this time.
-Incoming parameters
File object: Document objects
Bytes Complete: bytes of files that have been uploaded
Total Bytes: bytes of File volume

Common errors
The volume of the uploaded file does not exceed the value set by SWFUpload, but why can't it be uploaded successfully?
-Typically this is caused by server-side constraints, and for example, modify the Post_max_size and upload_max_filesize two settings in php.ini. apache+php
SWFUpload not working in the background of a Web site with session validation?
-This is because swfupload in the upload is equivalent to reopen a new session process, so can not be consistent with the original program, this need to upload the original program SessionID, according to it to "get back" its due to the sessions.


Upload Control prompt text

Find the parameters First
Upload_progress_handler

Mine is.

Upload_progress_handler:uploadprogress
Then open the Handlers.js file.

Lookup function "Uploadprogress"

Modified to:

  code is as follows copy code

function uploadprogress (file, bytesloaded, bytestotal) {
 
try { br> if (bytesloaded = = bytestotal)
{
var percent = Math.ceil ((bytesloaded/bytestotal) *);
 
var progress = new Fileprogress (file, this.customSettings.progressTarget);
Progress.setprogress (percent);
Progress.setstatus ("Decompression, please wait ...");
}
Else
{
var percent = Math.ceil ((bytesloaded/bytestotal) *);
 
var progress = new Fil Eprogress (file, this.customSettings.progressTarget);
Progress.setprogress (percent);
Progress.setstatus ("uploading ...");
}
catch (ex) {
This.debug (ex);
}
}

Custom Error Tips


Because SWFUpload will accept the string returned by the server, take advantage of this and return the fixed strings in the PHP file. I am returning a string of JS array types:

? [Copy to Clipboard] View Code php//Error
Die (Json_encode Array (0 =&gt; "Uploaderror", 1 =&gt; "You do not have permission to upload!" ")));

Upload successful
Die (Json_encode Array (0 =&gt; "", "1 =&gt;"));
The first element of the array is used in the JS branch statement, and the second element is the error message displayed.
Second, first modify JS
Open the Handlers.js file and find the Uploadsuccess function.
The original function is

The code is as follows Copy Code

Function uploadsuccess (file, serverdata) {
 try {
  var progress = new Fileprogress (file, this. Customsettings.progresstarget);
  progress.setcomplete ();
  progress.setstatus ("Complete.");
  progress.togglecancel (FALSE);
 
 } catch (ex) {
  this.debug (ex);
 
}
Change to

function uploadsuccess (file, serverdata) {

try {
Receive service-side string and convert to array type
Serverdata = eval (serverdata);

if (Serverdata[0]!= "") {
Error
This.uploaderror (file,serverdata[0],serverdata[1]);
}else{
Success
var progress = new Fileprogress (file, this.customSettings.progressTarget);
Progress.setcomplete ();
Progress.setstatus ("Upload success!") ");
Progress.togglecancel (FALSE);
}

catch (ex) {
This.debug (ex);
}
}
and find the Uploaderror function.
The original function is

function Uploaderror (file, errorcode, message) {
try {
var progress = new Fileprogress (file, this.customSettings.progressTarget);
Progress.seterror ();
Progress.togglecancel (FALSE);

Switch (errorcode) {
Case Swfupload.upload_error. Http_error:
Progress.setstatus ("Upload Error:" + message);
This.debug ("Error code:http error, File name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Missing_upload_url:
Progress.setstatus ("Configuration Error");
This.debug ("Error code:no backend file, file name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Upload_failed:
Progress.setstatus ("Upload Failed.");
This.debug ("Error code:upload Failed, file name:" + file.name + ", File size:" + file.size + ", message:" + message);
Break
Case Swfupload.upload_error. Io_error:
Progress.setstatus ("Server (IO) Error");
This.debug ("Error Code:io error, File name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Security_error:
Progress.setstatus ("Security Error");
This.debug ("Error code:security error, File name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Upload_limit_exceeded:
Progress.setstatus ("Upload limit exceeded.");
This.debug ("Error code:upload Limit exceeded, file name:" + file.name + ", File size:" + file.size + ", message:" + Me Ssage);
Break
Case Swfupload.upload_error. Specified_file_id_not_found:
Progress.setstatus ("File not Found.");
This.debug ("Error code:the file is not found, file name: + file.name +", File size: "+ file.size +", message: "+ M Essage);
Break
Case Swfupload.upload_error. File_validation_failed:
Progress.setstatus ("Failed Validation.") Upload skipped. ");
This.debug ("Error code:file Validation Failed, file name:" + file.name + ", File size:" + file.size + ", message:" + M Essage);
Break
Case Swfupload.upload_error. File_cancelled:
if (This.getstats (). files_queued = 0) {
document.getElementById (this.customSettings.cancelButtonId). Disabled = true;
}
Progress.setstatus ("cancelled");
Progress.setcancelled ();
Break
Case Swfupload.upload_error. Upload_stopped:
Progress.setstatus ("Stopped");
Break
Default
Progress.setstatus ("Unhandled Error:" + error_code);
This.debug ("Error Code: + errorcode +", file name: "+ file.name +", File size: "+ file.size +", message: "+ MESSAG e);
Break
}
catch (ex) {
This.debug (ex);
}
}
To

function Uploaderror (file, errorcode, message) {
try {
var progress = new Fileprogress (file, this.customSettings.progressTarget);
Progress.seterror ();
Progress.togglecancel (FALSE);

Switch (errorcode) {
Case ' Uploaderror ':
Progress.setstatus ("Upload failed:" + message);//Custom error hint
This.debug ("Error code:http error, File name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Http_error:
Progress.setstatus ("Upload Error:" + message);
This.debug ("Error code:http error, File name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Missing_upload_url:
Progress.setstatus ("Configuration Error");
This.debug ("Error code:no backend file, file name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Upload_failed:
Progress.setstatus ("Upload Failed.");
This.debug ("Error code:upload Failed, file name:" + file.name + ", File size:" + file.size + ", message:" + message);
Break
Case Swfupload.upload_error. Io_error:
Progress.setstatus ("Server (IO) Error");
This.debug ("Error Code:io error, File name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Security_error:
Progress.setstatus ("Security Error");
This.debug ("Error code:security error, File name:" + file.name + ", message:" + message);
Break
Case Swfupload.upload_error. Upload_limit_exceeded:
Progress.setstatus ("Upload limit exceeded.");
This.debug ("Error code:upload Limit exceeded, file name:" + file.name + ", File size:" + file.size + ", message:" + Me Ssage);
Break
Case Swfupload.upload_error. Specified_file_id_not_found:
Progress.setstatus ("File not Found.");
This.debug ("Error code:the file is not found, file name: + file.name +", File size: "+ file.size +", message: "+ M Essage);
Break
Case Swfupload.upload_error. File_validation_failed:
Progress.setstatus ("Failed Validation.") Upload skipped. ");
This.debug ("Error code:file Validation Failed, file name:" + file.name + ", File size:" + file.size + ", message:" + M Essage);
Break
Case Swfupload.upload_error. File_cancelled:
if (This.getstats (). files_queued = 0) {
document.getElementById (this.customSettings.cancelButtonId). Disabled = true;
Changebtnclassname (this.customSettings.cancelButtonId, ' btncanceldl ');
}
Progress.setstatus ("cancelled");
Progress.setcancelled ();
Break
Case Swfupload.upload_error. Upload_stopped:
Progress.setstatus ("Stopped");
Break
Default
Progress.setstatus ("Unhandled Error:" + error_code);
This.debug ("Error Code: + errorcode +", file name: "+ file.name +", File size: "+ file.size +", message: "+ MESSAG e);
Break
}
catch (ex) {
This.debug (ex);
}
}


You can see that you just added a branching utility to the switch structure to show a hint of an upload failure

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.