I'm trying to make a webpage that allows the uploading of multiple files at the same times. I will limit the file extensions to the most common images like JPG, JPEG, PNG and GIF.
I've done some research on this and everywhere I look it's flash this and flash that.
I don't want to use flash really. Especially with Flash 10, which disables the most common used method to enable multifile upload.
What I'm looking for is a way to keep creating more and more input fields, each with a browse button and then with one final upload button at the bottom of the form. Creating the new input fields with a Javascript is nog big deal really.
So I'm wondering how this works. Do I need to give all file-input fields the same name atribute so I can use 1 piece of PHP code to solve this? Or Is there some way for PHP to detect howmany files have been sumbitted and simply put the code for parsing a file inside a for-loop?
You can keep adding 'file' inputs but use a name of something like 'upload[]'
<input type="file" name="upload[]">
Then in $_FILES['upload'] you will have an array of files you can loop over like
foreach ($_FILES['upload'] as $file) {
echo $file['size'];
}
Here is the algorithm:
You add the new file input fields to your form. Each of this field MUST have a unique name. Then, on the server side, you loop through the $_FILES array looking how many files have been uploaded and handling them.
In using JavaScript to add new upload fields, you could also have JavaScript update some "hidden" input field with the number of upload fields in the form. That way, once you click Submit, that hidden value should be submitted and it will be trivial to parse out the $_FILES array for all the uploaded files.
If you have a reasonable maximum limit on the number of files, it's probably better to include that many file upload fields in the static form, then use the JavaScript to hide the superfluous ones, than to create them all dynamically. Then the form can still work when JavaScript is unavailable.
Side note: technically, single HTML file upload forms are already multiple file upload forms. According to the HTML form encoding standard, one should be able to select multiple files in the Browse dialogue box, and they'd be submitted as a multipart/mixed MIME structure.
However, almost nothing actually supports this. Older versions of Opera do on the client-side (and, I think, an ancient test browser of some sort, possibly Viola), and a few form-parsing components on the server-side, but not the PHP built-ins. In any case the UI is not very usable, so you're not missing much.
Related
I am a student trying to figure out, how i can simultaneously upload an files (jpg, jpeg, png) along with sending an message through PHP?
Currently i have tried two things.
Making a single form in html, and trying to submit to the same .php file. While following two separate tutorials, combining them. (See picture)
Making two different forms, which i want to be submitted from the same html page, with the same ''submit''. Is this possible?
So far i think i figured out that it is not possible to use both $_POST and $_FILES from the same form, is this true?
Any ideas how to fix the original code i already have, and if not, what is the easiest way to do it.
**I am learning, so the easiest way is prefered :)
HTML
PHP
I am trying to get an image from the user by using file input method. It is successfully getting the image from the user. But I want this input to be passed to my next line of code.
Any help would be appreciated.
<input type='file' name='image'>
$two=createfrompng("Here i want this input to be passed");
You can use $_FILES global variable.
Example :
var_dump($_FILES['image']);
http://php.net/manual/en/reserved.variables.files.php
You can't. Your PHP code is executed server-side. Before the resulting html is send to the client so you don't know if the user WILL upload a file or not and even less it's contents.
The effect you are trying to achieve should be done client-side by altering the DOM with javascript.
But anyway you can't immediately access the image because, for security reasons, javascript can't access client's filesystem so you need to upload the file (the way you are doing) process it server-side and send back to the client, which is difficult if you haven't a websocket connection to start comunication to the client.
I suggest you to slightly change your approach and submit your form targetted to an existing container in your page (tipically a div) and respond with only the html to render the image inside it.
See the jQuery .load() function. It is a simple solution and I think it will be the best for you.
…or another even simpler solution is to reload the whole page and mantain state data server side (if you want to manage multiple images as I thought to understand). It is less responsive. But not to much expensive (if your html is not huge) because the browser cache will remember your images (if you does'nt change the url to download them).
Check first, if the file exists in $_FILES and the use it, in your case:
$image = getimagesize($_FILES['image']['tmp_name']);
if ($image !== false) {
$two = createfrompng($image);
}
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. :)
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 ...
Alright, so a little preface: I've been working on adding drag and drop file uploading to the course management system called Moodle (specifically 2.0.1). This version of Moodle uses the YUI3 framework and uploads the form data with the file to be uploaded and the save-as name through an io-upload-iframe. The file is stored in the super global $_FILES until the filesystem is sent the relevant data on where to store it permanently.
The trouble I'm having is that instead of using YUI3's drag and drop features (Which, from a cursory look at their website is not the kind of drag and drop I need anyways) I'm using the native HTML5 drag and drop code. This seems to work in most major browsers (I haven't had the time to test much, and it's outside the scope of this project). The trouble I'm having is that this design of DND immediately gives you a file from the Event object in javascript. I could send this file object off to wherever I want, but the filesystem is only designed to handle variables temporarily stored in the $_FILES variable. I've not been able to find any easy way of getting this file stored there, unfortunately. I could to an HTTP request of various forms (either one of YUI3's special Y.io() requests or an XHR), but this requires a lot of duplicated code from the original source code.
Anybody have some suggestions?
Hard to tell what your problem is. But whatever your server or filesystem is, it has nothing to do with the temporarity of the $_FILES array.
When you receive the DND event, and YUI subsequently sends the file, then you will receive some data either in $_FILES or in $_POST. If so, just use move_uploaded_file or file_put_contents and store it elsewhere.
Assign that moved file a md5() hash as name, and have that returned as file identifier for your AJAX-DND upload request.
You can then use that hash id in your Javascript code, and refer to the already uploaded image file by this reference. Should your app initiate a normal form request after the drag'n'dropping, then you just include the collected image reference ids. And thus your server-side code can associate it again.
You could even reconstruct the $_FILES array if you want to:
foreach ((array)$_POST["prev_image_ids"] as $md5) {
$md5 = basename($md5);
$_FILES["image"][] = array(
"tmp_name" => $fn="./already-uploaded/$md5",
"size" => filesize($fn), "type"=>"image/whatever",
"name" => "unknown.jpg", "error"=>UPLOAD_ERR_OK,
); // you could store away those original attributes too
}