I need to implement a Facebook-style multiple image uploader in my PHP application. It should be possible to select multiple files using Ctrl+click.
Is there any jQuery plugin that I can use or any sample code I can refer to?
Please help
Thank You
This isn't really possible using a conventional file upload field. You're going to need to use a Flash based upload system. Please consider something like YUI Uploader. It is a Javascript library wrapped around a special file upload system contained in a flash movie. It's remarkably easy to use. There's probably plenty of other alternatives out there too.
EDIT: There is HTML5 functionality for multiple file upload fields now. You can do it like this:
<input type="file" multiple="true" />
Of course this isn't going to be well supported in all browsers. There might be a JS upload library out there that uses HTML5 and then falls back on Flash where HTML5 is not available. May the Google be with you :)
with uploadify you can have the ability to select multiple files for upload. it uses some flash too.
Related
I need to select multiple files and I found one way to do this. But that way only works on newest browsers, using attribute "multiple" on input.
I didnt found any solution on internet.
Can anyone help me to find a solution?
I'm able to use HTML, PHP, JavaScript (jQuery).
Thanks for attention.
There is no native solution to multiple file selection uploading in older browsers. This requires some kind of plugin technology, typically Flash or Java.
I personally use Plupload. It will seamlessly switch between HTML5 and Flash (among others) based on the user's browser. There are plenty of other Flash or Java multi-file upload solutions out there as well.
I think the traditional solution to this is to allow multiple file input elements; like this.
File 1: [_____] (Browse...)
File 2: [_____] (Browse...)
Upload more files...
If the user needs more, just have them click a button at the bottom to create them. At some points, YouTube would allow you to use a Java applet-based upload dialog as well; but since then the opinion of Java applet security has faded quite a lot and most people avoid it entirely.
Having multi-selection is a real benefit to modern browsers, and one that's not really so easy to emulate in the older ones.
Hey guys I'm trying to implement file upload on my site without refreshing the page. I don't want something like iFrame is there any other way to do this in ajax? I've tried though (USING Codeigniter & ajax but it outputs "You have not uploaded anything"). I've read certain pages like this one but I couldn't seem to implement it properly. Any suggestions guys? I read almost all suggestions posted here using jquery ajax but they are all not good. I just want pure jquery ajax nothing else.
If its not possible, iframe could do please share some examples. :)
Note: This is only good for one upload at a time. No multiples.
Instead of reinventing a whole thing from a scratch, I would use one of the file upload components.
Plupload - has UI, integrates nicely with jQuery. Depending on browser can use HTML5, Flash, Silverlight or HTML4
Swfupload
Uploadify
there is no AJAX file upload. Its all iFrame behind the curtain when it comes to file upload. The example link you gave does not do any magic but it uses hidden iFrame.
Many Answers can be found here: How can I upload files asynchronously?
This question may be a duplicate to the above
Ref: "There's various ready-made plugins on doing file upload on jquery.
Doing this kind of uploading hacks is not an enjoyable experience, so people enjoy using ready-made solutions.
Here's few:
http://www.phpletter.com/Demo/AjaxFileUpload-Demo
http://www.fyneworks.com/jquery/multiple-file-upload
Ajax File Upload Plugin
Multiple File Upload Plugin
You can search more from jquery's plugin -site."
From pure ajax it is not possible, you can use this ajax form plugin and it will be handle all things (create iframe automatically for input type file)
I have tried many, many plugins for a project in the past, and I came to the conclusion that I liked none of them. Well, except this one: jQuery-file-upload
In my experience this is easily the best plugin out there for handling file upload.
According to my knowledge there has to be a server side programming language such as php.
Try this out.
http://valums.com/ajax-upload/
How do I start with creating a file upload mechanism that works via Ajax? I've written file upload scripts before but they involved no JavaScript, just submitting a form with a modified encoding type attribute. I need the file upload to have the following features:
Progress bar
Error checking (for network connection drops, bad data, etc)
Absolutely no "manual" form submission, Ajax takes care of it all.
And finally you know those upload buttons that allow you to select multiple files at once compared to the that only lets you select one file at a time? How can I implement those as well?
I'm using PHP as my backend btw.
You can find answers for your questions by looking at already done ajax file uploaders. There are many different plugins for jquery for example. One of the good place to start is to look at elfinder. Its based on jQuery & jQuery UI frontend and has Python and Php connectors for backend.
Here are another usefull links:
jQuery.upload - A simple ajax file upload plugin
Multiple File Upload widget with Drag&Drop support for jQuery
jQuery File Upload Demo
elFinder - file manager for web
The main thing, that you should understand, that its not possible to upload files using xhr-requests. And for today, the only way to upload files, is to use hidden iframes, and some javascript magic to carry out the work.
I've been searching for good file upload scrips for a long time. I've been using the YUI file uploader most recently, but the following should work well with PHP. For some reason I had a heck of a time learning how to get the YUI to work, plus it uses Flash to do the actual upload.
http://aquantum-demo.appspot.com/file-upload
with set up information for PHP on this page:
https://github.com/blueimp/jQuery-File-Upload/wiki/Setup
Anyone know what tool does facebook use for uploading multiple photos? It is so neat!
It look like they are using flash uploader? If so, which one out there has similar to that?
Thanks.
I'd recommend to have a look at Plupload, which is from the developers that brought us TinyMCE. It has the ability to use different "engines" depending on what is installed. The options are
Google Gears
Flash
Silverlight
BrowserPlus
HTML 5
HTML 4
You can specify more than one option and Plupload will automatically choose the next one, if the first option is not installed (and so on).
It is also possible to resize the images automatically before uploading them.
Last time I used it they were using a Java Applet uploader, which is pretty popular with on-the-fly uploading, or if you need to plug into the host OS to easily choose files to upload.
I was trying to upload a photo on facebook using a browser with no flash, and could see that it didn't work.
I am pretty confident in handling files and related issues using Php and have done some sites allowing users to upload and manage files (images, docs etc). But I never thought about the above flash approach. I googled a bit and saw that there are few scripts available on which I can look how it works using flash.
But my questions are, when I should decide to use flash for user uploads. What are the advantages of using this approach? or disadvantages?
Thanks
It isn't a choice between Flash and PHP. You need something on the client to send the data and something on the server to receive it.
Ask yourself the following question:
Does Flash offer anything useful for my project?
The obvious things it lets you do are having a nice UI for selecting multiple files at once, and a simple method for seeing the progress of uploads.
If you decide that it does offer features, then implement it using progressive enhancement. Flickr is an example of this — with Flash you get the fancy uploader, without it you still get a series of regular file inputs. They aren't as nice to use, but they are functional and what would have been used if Flash wasn't an option in the first place
Depends on your audience: If you are pretty sure that your users have flash installed, there is nothing against it. It even gives some neat advantages, like:
Upload of multiple files at once
Progress bar while uploading
Instant preview of uploaded media
etc.
Well, with flash, the obvious letdown is that it will only work when a user has flash (although, you could display something in its place if they didn't). If your a flash programmer and comfortable with flash, I can see how it would be better. You could generate a file list, multiple uploads ect. I would say it's just an alternative to JavaScript for providing interactivity and allowing users to upload content dynamically.
when I should decide to use flash for
user uploads.
use it when the whole website is flash, but that is not professional and you can't count a lot on flash security, while you can write/use a lot of classes for hardening and checking files uploaded by php scripts..
on the other hand, some people like flash upload for progress bars, but you can do such stuff with php and jquery. for example check uplodify
Correction
I don't have flash support on my current browser so when watching uploadify demos I only see the fallback, thanks to soulmerge for making this clear