Since natively IE7 (and some others browsers, haven't checked yet, to be precise) doesn't use <input multiple="" /> parameter, I would love to know what is... the most compatible (varies by preference, yes, yes) solution for one input field, multiple file upload.
It would be nice, if there would be no JavaScript involved in solution, but I somehow have this strange feeling, that it is impossible - correct me if I'm wrong.
Thanks in advance!
The most browser compatible pure HTML method of allowing multiple file uploads is to simply have multiple:
<input type="file" />
You can alternatively use Java or Flash uploaders -- but these are probably less compatible then JavaScript.
JavaScript which degrades gracefully is probably your best bet, check out Valum's File-Uploader. The library allows you to make use of:
Multiple file uploading through the upload form element if the browser supports it.
Drag and drop file uploading if the browser supports it
Degrade all the way down to an HTML input form element if the browser has JavaScript disabled.
It is very good practice to develop for the latest browsers, while supporting older browsers (not the other way around). If people are on older browsers or don't have JavaScript enabled, then multiple file uploading is going to be painful regardless of what you do.
Our world as yet to bestow on to us such a tool/control ...
But I think the best your going to get, if you don't want to use any client-side technologies (Like javascript or Flash), is to let the user upload a file with a normal POST and then somehow (maybe in your session) remember the files that the user uploaded or just save them to the database as they come in.
So the process would be:
the user selects a file and uploads;
you display the image and ask if they
want to upload another file;
you then give them a option to go to
the next page or do some action.
Probably not the best way to approach this but it should work.
Then again if you are willing to use Javascript or Flash there are tons of scripts out there that would allow you to upload multiple files. So maybe look for one that gives only one input and populates a list of selected images?
Just my 2 cents ...
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.
I have a very basic form which posts images to a PHP script, I use it to upload images to my server.
The problem I have is that when I return to my form at a later date I want it to remember the file I uploaded to my server. I can do this with text inputs by caching the input values in a cookie, can I do something similar for file inputs?
The answer is no. This is due to the security implications if the form remembers paths.
Not with a form, as the others have pointed out. You might be able to fulfill your requirement with a Flash or Java applet which does the upload for you and may be able to remember the path itself (e.g. in a cookie). However this isn't exactly lightweight and will trigger some security popup in most browsers. This may turn away users from your site.
I assume you want this for convenience, so users can upload multiple files with ease. You might want to provide a drag & drop file upload (e.g. as outlined in this tutorial http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/). This would improve your usability while keeping within the boundaries enforced by browser security.
How can i select a folder in browse button. I mean, i want to upload a folder or file. So is it possible?
just tried html tag input with file type
That's all about HTML and has nothing to do with PHP (at least until the data is submitted).
HTML provides no mechanism to select folders for upload.
HTML 5 allows multiple files to be selected. I assume this would be handled in PHP the same way as any other kind of multiple value response would be handled - make sure the name ends in [] then treat it as an array in $_POST.
As far as I'm aware this is only possible in chrome (and possibly only in a nightly build).
I could be wrong but googling things is just too much effort
You can use <input name="myfile" type="file" /> in a form and $_FILES in PHP to get the uploaded file.
I think Chrome 11+ also supports uploading folders, but there is no HTML-Only Solution that works for all browsers.
Edit: FancyUpload supports uploading multiple files. Maybe that is what you're looking for. :)
I'm using APC to make a upload meter. These are the files:
Form
Upload Meter
php.ini
The problem I'm having is I'm getting nothing when I do the FETCH. I'm taking a look at the APC INFO panel as I'm making the upload and I see that the key upload_XXXXX isn't stored in the cache until the file is completely uploaded!
What am I doing wrong? Do I have something badly configured in php.ini?
I've read here that there's a bug having to do with lightppd.
As discussed in the comments, APC's file upload progress indicator is either unreliable or not functional under FastCGI.
Your best bet for a upload progress indicator is therefore going to be client-side.
I'm a big fan of Plupload, an upload widget that supports no less than six backends to provide better functionality than the regular file input type (including the HTML5 File interface in browsers that support it). You can use it standalone with a custom widget of your own design, or you can use the included fancy jQuery widget.
If you want something a little more oldschool, there's also good old SWFUpload.
Both of these options will fall back to a normal file input when Javascript is disabled.
Sorry, this isn't a direct answer to your question, but you may want to consider the HTML5 file API with XMLHttpRequest.
var req = new XMLHttpRequest();
req.upload.addEventListener("progress", updateProgress, false);
// ...
req.open();
// ...
There are some examples on developer.mozilla.org.
The downside is that it is browser dependent. The upside is that it is server independent. But ultimately, this will be the best way to track file uploads.
We have a web page (HTML javascript and PHP mostly) that allows a user to upload an image. We have the normal browse button, and it works fine. However, we want to add the functionality to drag and drop an image into the text field instead.
gmail allows you to do this in their mail app, so it's possible. The only way we've thought of to do it is to create a java applet that does all of this, but that ends up being very messy.
Has onyone done this? how does it work?
Edit: I'm using firefox on a Mac. Most of my users will be probably be using IE on Windows.
thanks
You can do this in XUL (Making it effectively a Firefox-only solution) or in ActiveX (A IE-only solution).
This is an old question, but it came up in my search results.
So for reference, use the HTML5 file classes and Drag and Drop.
Article with details here: http://www.html5rocks.com/en/tutorials/file/dndfiles/
I've tried dragging an dropping and image their editor. It will pick up the path if the file is on a web page, but if it's on your local drive, the path will be "file://c:....", which will not be uploaded with the message and will end up as a broken image.
Browser don't have access to the local file system, for security reasons, so I doubt this would ever work the way you describe.
Dropping a file into a normal input field will copy the local path to the image into the input field, however this is worthless to you since the .value property of an <input type='file'> tag is readonly for security reasons.
You will notice that gmail only allows you to drag / drop an image (for upload) to the <input type='file'> input and not any other field.
I think what you want to ask is "how do I style a <input type='file'> tag like google", which is a whole other topic.
EDIT: Ok in IE you cannot drag a file into a <input type='file'> tag
the best way to get this done is to make a Adobe AIR standalone like the photo uploader for https://www.photoshop.com/express
you can find some great information at this post:
http://devzone.zend.com/article/3650-Desktop-Image-Uploaders-Using-Adobe-AIR-and-JavaScript
I think I have a way around the annoying as hell FF3 local filesystem issues but I need a piece of javascript to test with. How do I read the local file path from the file upload form? Please, stop with the 'flash is a solution'. I'm a Flash developer by trade and even I don't think it's a good solution.
Do you by chance have this Firefox extension installed?
http://www.teslacore.it/wiki/index.php?title=DragDropUpload
I would be surprised if there is a solution without having to install an external plugin or extension. As someone mentioned that would be a security issue. A web site would be able to grab files from people's computers and upload them without their knowledge.
Check out the SWELL Framework. Its javascript based.