Multiple Upload Solution; Using Javascript, Flash and PHP
October 19, 2007Due to security changes in Adobe Flash player 10, this script doesn't work anymore when updated to Flash player 10. Several other similar solutions already solved this problem; FancyUpload, YUI Uploader.
Thanks for the introduction Willem and hi all! Willem asked me to write some posts on additional topics like Flash, Actionscript and so on. I hope you will enjoy some of my findings, codes, tips or stories.
For my first contribution i'd like to start sharing a script i wrote a few months ago.
A problem i often encouter is that people, often customers, would like to upload multiple files all together, instead of, what you often see, one file at the time. Of course a very simple solution is to put multiple HTML upload fields on a page, but obviously we could think of a better solution. There are many alternatives on the internet, but most of them aren't customizable and as a real webdeveloper, i would like to create my own solution of course. That is why i created a solution combining three popular webtechnologies; Javascript, Flash and PHP; Javascript constrols the visual aspects, while Flash in combination with PHP handles the upload process.
Since Flash 8, the possibility to communicate between Flash and Javascript is improved, so you can communicate easily using the Flash's ExternalInterface API. With this you can call javascript functions from Actionscript and pass any number of arguments of any data type and vice versa!
To see a working example of my multiple upload solution, click here (no files will be actually uploaded).
I also helped willem out with the design and think we came up with a nice look for this weblog. As you can see at the top we included a menu and added the page 'projects'. I hope we will be able to give this page some content and if i improved my multiple upload script, i will add this as a project. Untill then, you can download the source of this first version here.
Hi there; wonderfull and interesting script you’ve got there.
It works beautifully under FF on Mac, but with tests on FF and IE6 under XP it did nothing. Is there something wrong with the script?
Comment by S. Witte — November 29, 2007 @ 3:44 pm
Hi S. Witte,
Can you give more specific information on what is not working? I did some tests and it does work in FF/IE with XP.
Thanks,
Comment by Willem — November 29, 2007 @ 5:37 pm
Hi S. Witte, remember that this is just a simple demo. I am planning to make it much more extensive, so every help is welcome. Especially in the form of cross-browser tests
thanks in advance!
Comment by martijn — November 29, 2007 @ 5:42 pm
O.k., can we continue via e-mail (and in dutch?
)
Comment by S. Witte — November 30, 2007 @ 11:02 am
We zouden graag meewerken om dit script goed doorgetest te krijgen - en willen onderzoeken of het bruikbaar is in Image*After.
Aanwezige testplatforms: Apple OSX10.4, WinXP Home, WinXP-Pro, Linux.
Oh ja, en een bezoekers-potentieel van zo’n 8000 per dag.:)
Kortom, neem a.j.b. even contact op?
switte@xs4all.nl, of tothecoolguys@imagefater.com
Met groet!
Stefan
Comment by S. Witte — December 1, 2007 @ 7:25 pm
Hi,
Great little script! I’ve used it on my site and it works perfectly in everything except Firefox. The flash uploader does not seem to pass the cookie properly. The end result is that a new cookie session is created which means my error trapping stops this (need to use the original cookie to assign the file).
Do you have any suggestions for what I could do here?
Thanks again for posting this files in the first place.
Simon
Comment by Simon — January 30, 2008 @ 12:56 pm
Hi s.Witte,
I need to implement the multiple file upload in JSP. Is it possible? I am new to flash and have no much idea of how to implement.
Do you have any code snippet (a non-Applet) solution, where I can select multiple files and upload them at once.
Any help will be appreciated. Please mail me to sakvk@yahoo.com.
Regards,
Sarika
Comment by sarika — February 20, 2008 @ 9:06 am
Hi,
Is there anyway to display the image once uploaded?
Andy
Comment by Andy — February 23, 2008 @ 12:36 pm
Hello,
I have tested the sript on Firefox/2.0.0.12 and thats on a vista machine the script don’t really work if you browse multiple times. Not every file is uploaded. It’s a pitty because its a very nice script.
If you want that i test more versions please email me.
Greetings (groetjes),
Ernesto
Comment by Ernestomodena — March 7, 2008 @ 12:06 pm
Hey, that’s no error message?
And if the upload directory is wrong?
Can I send a form with the file to make an insert in the BD?
Tks..
Comment by Wagner — March 24, 2008 @ 9:03 pm
Multiple Upload Solution; Using Javascript, Flash and PHP…
A problem i often encouter is that people, often customers, would like to upload multiple files all together, instead of, what you often see, one file at the time. Of course a very simple solution is to put multiple HTML upload fields on a page, but ob…
Trackback by Bookmarks.WittySparks.com — May 27, 2008 @ 4:38 pm
hallo martijn
ik ben niet zo thuis in scripts
ik houd mij bezig met mp3 bestanden die soms over de 100mb zijn
maar als ik een bestand wil uploaden, komt er om de minuut een waarschuwing in beeld
met A script in this movie is causing adobe flash player 9 to run slowly.
if it continues to run, your comupter may become unresponsive. Do you
want to abort this script en als het uoloadbalkje op het eind staat en ik in mijn dorectory kijk staat het nummer cq bestand er niet in
kun je mij hier bij helpen?
het adres is http://www.casy.nl/ajax/index.html
Comment by Cees — September 13, 2008 @ 12:09 pm
Hoi Cees,
Eerlijk gezegd zou ik niet direct de oplossing zo uit mijn hoofd weten. In principe is het logisch dat die melding komt, omdat het gewoonweg te lang duurt. Toch moet dit natuurlijk op te lossen zijn.
Aangezien het voorbeeld dat ik hier schets echt puur een voorbeeld is dat nog uitgewerkt moet worden, raad ik aan eens naar http://www.swfupload.org/ te kijken, dit is namelijk wel een uitgewerkte implementatie en werkt naar mijn idee erg goed.
Succes!
Comment by martijn — September 13, 2008 @ 1:43 pm
Heel mooi script, ik gebruik het met een linux Apache server en dat gaat goed. Echter…..
Ik wil de uploads op een andere locatie hebben en ik verander daar om in de file ‘Upload.php’ de string
$l_sFilePath = “../uploads/”.$l_sFileName;
in
$l_sFilePath = “/media/sata/uploads/”.$l_sFileName;
Ik weet dat dat de juiste, bruikbare directory want in een single upload php script werkt het, maar hier werkt het niet, krijg ook geen mededeling dat het niet lukt. Ales lijkt gewoon goed te gaan, maar als ik de directory check, staat er geen file in, kan dan die ge-uploade file ook nergens vinden.
Enig idee of ik wat over het hoofd zie in je script?
Alvast bedankt
Comment by ed — October 15, 2008 @ 9:42 pm
Beste Ed,
Ik zou het zo direct niet weten moet ik eerlijk zeggen. Normaal zou ik zeggen dat je goed moet kijken of je rechten hebt om in die map te schrijven, maar aangezien je aangeeft dat het met een single upload script wel werkt, kan dat het niet zijn. Het pad aanpassen in PHP zou het moeten doen, want in Flash zelf wordt nergens het pad aangegeven. Het probleem ligt dus niet bij Flash. Zoals ik hierboven schreef raad ik je aan eens naar http://www.swfupload.org/ te kijken.
Succes, Martijn
Comment by Martijn — October 17, 2008 @ 11:18 am
Bedankt Martijn. Het is me nog niet gelukt maar ik blijf het proberen. Het zal vast wel iets simpels zijn wat ik over het hoofd zie. Overigens wel een heel mooi script
Comment by Martijn — November 3, 2008 @ 10:21 am