订阅 | 这是最新一篇日志

下一篇 ]

JAVA技术

SWFUpload Flash+Javascript无刷新上传应用

作者:anotherbug 日期:2007-09-29 16:08:17

字体大小: 小中大


swfupload1.jpg(28.6 K)

切换到幻灯片模式

SWFUpload 使用说明如下，附件内容为无刷新使用效果截图，将应用于CJWBlog系统的编辑器。

SWFUpload documentation

Most of the configurations are optional, but if you want to do something more advanced
you probably want the flash to call back to some javascript and present the information in a more informative
way to the user.

Sample configuration

Below is the configuration options used for the example on this page

 
  
 var swfu; 
  
 window.onload = function() { 
  
 	swfu = new SWFUpload({ 
 		upload_script : "/upload.php?id=someid", 
 		target : "SWFUploadTarget", 
 		flash_path : "/jscripts/SWFUpload/SWFUpload.swf", 
 		allowed_filesize : 30720,	// 30 MB 
 		allowed_filetypes : "*.*", 
 		allowed_filetypes_description : "All files...", 
 		browse_link_innerhtml : "Browse", 
 		upload_link_innerhtml : "Upload queue", 
 		browse_link_class : "swfuploadbtn browsebtn", 
 		upload_link_class : "swfuploadbtn uploadbtn", 
 		flash_loaded_callback : 'swfu.flashLoaded', 
 		upload_file_queued_callback : "fileQueued", 
 		upload_file_start_callback : 'uploadFileStart', 
 		upload_progress_callback : 'uploadProgress', 
 		upload_file_complete_callback : 'uploadFileComplete', 
 		upload_file_cancel_callback : 'uploadFileCancelled', 
 		upload_queue_complete_callback : 'uploadQueueComplete', 
 		upload_error_callback : 'uploadError', 
 		upload_cancel_callback : 'uploadCancel', 
 		auto_upload : false			 
 	}); 
 	 
 };

The file object

Most of the callback functions recieves a file object from the flash with the following properties:

id - the auto-generated unique id for each file

name - actual filename

size - filesize

type - filetype

creationDate - fhe file creation date

creator - file creator

Settings

debug

Turn script debugging on/off

Type: bool

Default: false

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	debug : true 
 });

target

Target for auto-generated upload/browse links

Type: string

Default: null

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	target : "somedivid" 
 });

create_ui

Auto-generate UI. Use this if you want to replace an existing form

Type: bool

Default: true

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	create_ui : true 
 });

browse_link_class

CSS-class given to auto-generated browse link

Type: string

Default: SWFBrowseLink

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	browse_link_class : "yourbrowsebtnclass" 
 });

upload_link_class

CSS-class given to auto-generated upload link

Type: string

Default: SWFUploadLink

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	upload_link_class : "youruploadbtnclass" 
 });

browse_link_innerhtml

innerHTML for generated browse link

Type: string

Default: <span>Browse...</span>

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	browse_link_innerhtml : "&lt;h1&gt;Browse for files&lt;/h1&gt;" 
 });

upload_link_innerhtml

innerHTML for generated upload link

Type: string

Default: <span>Upload</span>

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	upload_link_innerhtml : "&lt;h1&gt;Upload files&lt;/h1&gt;" 
 });

flash_loaded_callback - required

Invoked when the flash is loaded. This function resides within SWFUpload, so it just needs to be called with the correct instance name

Returns: void

Default: null

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	flash_loaded_callback : "swfu.flashLoaded" 
 });

upload_file_queued_callback

Invoked when each file is added to the queue

Example:

 
 function fileQueuedFunction(file, queuelength) { 
 	var ul = document.getElementById("yourfileul"); 
 	var li = document.createElement("li"); 
 	ul.appendChild(document.createTextNode(file.name)); 
 } 
  
  
 swfu = new SWFUpload({ 
 	... 
 	upload_file_queued_callback : "fileQueuedFunction" 
 });

upload_file_start_callback

Invoked when upload starts

Example:

 
 function fileStartFunction(file, position, queuelength) { 
 	alert(file.name + " " + position + " of " + queuelength); 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_file_start_callback : "fileStartFunction" 
 });

upload_file_complete_callback

Invoked when each file is completed

Example:

 
 function fileCompletedFunction(file) { 
 	alert(file.name + " completed"); 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_file_complete_callback : "fileCompletedFunction" 
 });

upload_queue_complete_callback

Invoked when upload queue is complete

Example:

 
 function queueCompletedFunction() { 
 	alert("Queue completed"); 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_queue_complete_callback : "queueCompletedFunction" 
 });

upload_progress_callback

Called with regular updates on progress

Example:

 
 function uploadProgressFunction(file, bytesloaded, bytestotal) { 
 	var progress = document.getElementById("yourprogressid"); 
 	var percent = Math.ceil((bytesloaded / bytestotal) * 100); 
 	progress.innerHTML = percent + "%";	 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_progress_callback : "uploadProgressFunction" 
 });

upload_dialog_cancel_callback

Invoked when cancel btn in dialog is clicked

Example:

 
 function dialogCancelFunction() { 
 	alert("Browse cancelled"); 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_dialog_cancel_callback : "dialogCancelFunction" 
 });

upload_file_error_callback

Invoked on error

Example:

 
 function errorsFunction(errcode, file, msg) { 
 	alert(errcode + ", " file.name + ", " + msg); 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_file_error_callback : "errorsFunction" 
 });

upload_file_cancel_callback

Invoked when a file upload is cancelled

Example:

 
 function cancelFileFunction(file, queuelength) { 
 	alert("File: " + file.name + " cancelled"); 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_file_cancel_callback : "cancelFileFunction" 
 });

upload_queue_cancel_callback

Invoked when upload queue is cancelled

Example:

 
 function cancelQueueFunction() { 
 	alert("Queue cancelled"); 
 } 
  
 swfu = new SWFUpload({ 
 	... 
 	upload_queue_cancel_callback : "cancelQueueFunction" 
 });

upload_script - required

Path to the script that recieves the uploaded files from flash.

Type: string

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	upload_script : "upload.php?param1=foo" 
 });

Code snippets to retrieve posted data

php:

 
 $fileObject = $_FILES['Filedata'];

C#:

 
 HttpPostedFile fileObject = Request.Files["Filedata"];

VB.NET

 
 Dim fileObject As HttpPostedFile 
 fileObject = Request.Files("Filedata")

Ruby on rails

 
 fileObject = params[:Filedata]

auto_upload

Start upload directly or require upload button.

Type: bool

Default: false

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	auto_upload : true 
 });

allowed_filetypes

List of allowed filetypes

Type: string

Default: "*.*"

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	allowed_filetypes : "*.jpg;*.gif;*.pdf" 
 });

allowed_filetypes_description

Description for allowed filetypes, displayed in the drop-down in the file dialog

Type: string

Default: "All files"

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	allowed_filetypes_description : "Description filetypes" 
 });

allowed_filesize

Max allowed filesize in kilobytes

Type: int

Default: 1024

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	allowed_filesize : "30000" 
 });

flash_path

Path to flash-file

Type: string

Default: "jscripts/SWFUpload/SWFUpload.swf"

Example:

 
 swfu = new SWFUpload({ 
 	... 
 	flash_path : "folder/swf/myrenamedswfupload.swf" 
 });

Tips & Tricks

Get the session-id from ruby on rails apps:

blog.inquirylabs.com

Error handling

There is a bit of simple error handling built-in, but this can be expanded by using the
upload_error_callback. The SWF will return a few different error codes depending on
what goes wrong. Here is a short explanation:

-10: HTTP error, also returns the http error code (404 etc)

-20: Custom error code if no backend file is specified

-30: IO-error

-40: Security error

-50: Filesize exceeds limit

The error always contains one of these codes and the file object that caused the error,
some, like the http error also contains a message (the http error code).

Known bugs

If you are using Apache with mod_security this will not work, you need to put
the following in your .htaccess file to disable mod_security:

SecFilterEngine Off

SecFilterScanPOST Off

Disabling mod_security isn't allowed on some shared hosts, and only do this if you know what you are doing.

This is due to a bug in the way that flash sends the headers back to the server according to the Flash 8 documentation

IE Out of memory-bug

When using multiple instances of SWFUpload on the same page IE doesn't remove the ExternalInterface functions correctly, use this "hack" to temporarily fix it until Adobe sorts out their player:

 
 window.onbeforeunload = function() { 
 	if (document.all) 
 		window.onunload = null; 
 }

Updating ScriptLimits

If you have downloaded the source-release you will have to manually update the ScriptLimit tag to prevent the "A script on this site is running slowly"-alert, you can get rid of that
and find more information about the problem here http://www.buraks.com/swfsli/