upload button
examples
description
the upload button is a flash based multiple or single file upload. it is highly configurable, that you can customize it for your web page. you can ether implement it with our javascript, which replaces the <input type="file" /> tag or directly as a flash object.
how to use
part 1 - setup the upload button with javascript
this is comming up very soon! its gonna be the best and easiest way to implement the upload button on your page, since it will automaticaly use the css styles from your page and the <input type="file" /> tag...
part 2 - setup the upload button without javascript
you can use the usual embed and object tags to implement the flash file. choose the size you want, in percents to your div or in pixels, the flash file is gonna scale to the desired size (make sure that the width is longer than the height, since the button needs space for the loading bar). you will find examples in the download package. i am gonna explain how to use the variables, which you need to directly pass to the swf-file in the object (embed) tag.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="30" id="gallerySub" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent" />
<param name="movie" value="http://www.starsystems.ch/upload/upload.swf?flashIDVar=1&phpPfadVar=http://www.starsystems.ch/upload/upload.php&urlPathVar=upload/&multipleFilesVar=true&fileExtensionVar=*.jpg; *.jpeg&fileDescriptionVar=Images&btnAlignVar=left&ladebalkenColorVar=0xFF0000&btnColorVar=0x9E005D&myformatFontVar=Currier&myformatSizeVar=12&schriftColorVar=000000&textLeftVar=from&textRightVar=Total loaded:&textBtnVar=Browse" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
<embed src="http://www.starsystems.ch/upload/upload.swf?flashIDVar=1&phpPfadVar=http://www.starsystems.ch/upload/upload.php&urlPathVar=upload/&multipleFilesVar=true&fileExtensionVar=*.jpg; *.jpeg&fileDescriptionVar=Images&btnAlignVar=left&ladebalkenColorVar=0xFF0000&btnColorVar=0x9E005D&myformatFontVar=Currier&myformatSizeVar=12&schriftColorVar=0x000000&textLeftVar=from&textRightVar=Total loaded:&textBtnVar=Browse" quality="high" bgcolor="#ffffff" width="100%" height="30" name="gallerySub" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
the following two parameters are the most important to change:
value="http://www.starsystems.ch/upload/upload.swf?flashIDVar=1&phpPfadVar=http://www.starsystems.ch/upload/upload.php&urlPathVar=upload/&multipleFilesVar=true&fileExtensionVar=*.jpg; *.jpeg&fileDescriptionVar=Images&btnAlignVar=left&ladebalkenColorVar=0xFF0000&btnColorVar=0x9E005D&myformatFontVar=Currier&myformatSizeVar=12&schriftColorVar=000000&textLeftVar=from&textRightVar=Total loaded:&textBtnVar=Browse"
src="http://www.starsystems.ch/upload/upload.swf?flashIDVar=1&phpPfadVar=http://www.starsystems.ch/upload/upload.php&urlPathVar=upload/&multipleFilesVar=true&fileExtensionVar=*.jpg; *.jpeg&fileDescriptionVar=Images&btnAlignVar=left&ladebalkenColorVar=0xFF0000&btnColorVar=0x9E005D&myformatFontVar=Currier&myformatSizeVar=12&schriftColorVar=0x000000&textLeftVar=from&textRightVar=Total loaded:&textBtnVar=Browse"
| http://www.starsystems.ch/upload/upload.swf | this is the path to the swf-file, in this example the swf-file is stored in the folder upload. |
| the "?" after the ".swf" indicates that variables are followed. the variables are defined by the "=" sign and a new variable is added by "&" | |
| flashIDVar=1 | dont change this variable. this variable would be important for people who want to write their own handling of the flash in javascript. you are gonna find more information in part 2. |
| phpPfadVar=http://www.starsystems.ch/upload/upload.php | this is the path to the php-file, which handels the uploaded files. you are gonna find an example of the php-file in the download package. |
| urlPathVar=upload/ | this variable defines the folder on the server, where the uploaded files have to be stored. make sure, that you have created such a directory plus dont forget the "/" at the end of the variable! this is a relative path to the folder in the same directory as the html-file. you can also use the absolute path like "http://www.starsystems.ch/upload/upload/". be aware that the folder, in which the uploaded files are gonna be saved, has the "0777" permission! read, write and execute permission for owner, group and public!!! |
| multipleFilesVar=true | here you can define if the user can upload multiple files = true or just single files = false. |
| fileExtensionVar=*.jpg; *.jpeg | this variable defines what kind of extentions can be uploaded. |
| fileDescriptionVar=Images | this variable is the name shown for the kind of files which you allow to upload. |
| btnAlignVar=left | you can let the button align: left, center or right |
| ladebalkenColorVar=0xFF0000 | this variable defines the loading bar color. |
| btnColorVar=0x9E005D | this variable defines the button color. |
| myformatFontVar=Currier | this variable defines the font. |
| myformatSizeVar=12 | this variable defines the font size. |
| schriftColorVar=0x000000 | this variable defines the font color. |
| textLeftVar=from | this variable defines the text on the loading bar left. |
| textRightVar=Total loaded: | this variable defines the text on the loading bar right. |
| textBtnVar=Browse | this variable defines the text on the button. |
part 3 - additional files
you need to include the .htaccess file in the folder in which you are running the upload. the .htaccess file is gonna take effect in the folder placed plus subfolders. also you need to include the php-file, which handels the uploaded files. you can find both files in the download package.
part 4 - closing comment
we are gonna include an error handling in the javascript version, see part 2, which helps you with detecting different security or file size issues, which you may face with different server settings. in case the download package files dont work, pls wait until we finished the javascript version!
download
upload button (without javascript) - download package v1.0
Comments
What license does this code have? Thank you!
Comment by Jancis - 19.11.2008 - 15:19