Good Day, I have a form with multiple file input fields. I have a script that automatically adds another file input field on change. This is for a image upload functionality ( so that the user can upload multiple images in one go ). In Firefox, it works fine, but it fails on ie8.
this how the form looks like when many images were selected
form.html
<form class="ysForm" action="uploadImage.php" encType="multipart/form-data" method="post">
<input name="ys-file_0" class="ysFile" type="file" multi_selector="[object Object]"/>
<input name="ys-file_1" class="ysFile" type="file" multi_selector="[object Object]"/>
<input name="ys-file_2" class="ysFile" type="file" multi_selector="[object Object]"/>
</form>
uploadImage.php
foreach( $_FILES as $theFile ) {
//do image resize and save to a directory code
}
But uploadImage does not seem to get the image files.
Please help
According to other answers, such as the one here, IE8 doesn't support the multiple option for file inputs.
IE8 doesn't support multiple file uploading with
You can see this info:
IE8 - input (type="file") get files
http://social.msdn.microsoft.com/Forums/en-US/f0e72657-962f-4254-b95c-c47482401899/multiple-file-uploading-in-ie9-and-older-versions?forum=ieextensiondevelopment
Most modern browsers (including IE8) support multiple file uploading with a single dialog. The syntax is
<input type="file" multiple="true" name="upload" />
Your form will call your php script multiple times, once for each image.
That being said, I suggest using Uploadify, http://www.uploadify.com/, as it's a lot easier. There are also some fancy JQuery based solutions.
Related
I'm currently building a file upload method for a client that's going to be used by small children, so we're trying to eliminate as much room for error as possible. Is there a way I can change the default setting of the file upload dropdown from All Files to the filetypes we're allowing on the page? We've already got measures in place to keep users from uploading non-allowed files, this is just to make it extra clear so users don't waste time accidentally selecting the wrong filetype. Example:
I'd like to have the field the arrow is pointing to automatically show, say, .jpg and .pdf instead of All Files, for example.
Use the accept attribute of the input tag. So to accept only PNGs, JPEGs and GIFs you can use the following code:
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
Or simply:
<input type="file" name="myImage" accept="image/*" />
Note that this only hits the browser to accept this code. I. E. Opera and ie9 does not support this
You can use the accept attribute on the <input> field:
<input type="file" … accept="image/png, image/gif">
now first thing is I've seen everywhere over the net what to do in the case that what I'm trying to do doesn't work, I've tried all of the solutions and they don't work, I'm obviously missing something.
I'm uploading multiple files from a form field. This works perfectly and runs some code that resizes etc deletes tmp files blah blah.
The problem is if I don't want to upload any files the upload and image processing script still runs throwing a bunch of errors.
I've tried the following... plus a bunch more with some weird variations :P
if($_FILES['gallery']['name']!=""){ // if files then...
include_once("gallery_edit_script.php");
}
and
if (count($_FILES["gallery"]["name"] > 0)){ // if files count is more than 0 then...
include_once("gallery_edit_script.php");
}
Would the fact that the gallery_edit_script.php is an include have something to do with it?
I checked the file error with...
$_FILES["gallery"]["error"]
It showed no files were selected to upload which was exactly what I wanted.
Any ideas people?
Thanks for anyone who has a look at this.
Cheers
Added HTML but like I said upload is working fine, it's when I want to post the form and not include files to upload that I want it to skip the gallery script. This is on an edit page, so the user has submitted form, data added to db and files uploaded, then comes back and wants to edit data but not upload files.
HTML (simplified as there are heaps of fields etc)
<form action="inventory_edit_lease.php" enctype="multipart/form-data" name="myForm" id="myForm" method="post">
Gallery Photos <input class="input-file" type="file" name="gallery[]" id="gallery" multiple="multiple" />
<input class="button-edititem" type="submit" name="submit" id="button" value="" onclick="javascript:return validateMyForm();"/>
</form>
Sorry I didn't add HTML first time round, form works so didn't think I really needed it ;)
Few check lists...
Make sure you have named your <input type="file" /> as gallery:
<input type="file" />
Make sure the <form> tag has a method="post" and action="" to the correct URL.
Also, make sure your <form> tag has enctype="multipart/form-data" else you won't be able to upload files via that form!
We need to see the HTML Code of your file before we can suggest something. Make sure you have followed the above checklists and even then if it isn't working, post the code and let us know!
Without HTML form I'm just guessing:
for multiple file uploads with same name you must have the filed as
on server side you will receive them as $_FILES["gallery"]
$_FILES["gallery"] will be an array of elements, eg:
foreach($_FILES["gallery"] as $file){
var_export($file);
}
For those interested this is what worked :)
I got this from another thread if($_FILES['files']['name']!="") run if files, don't run if no files headache
if(!empty($_FILES['gallery']['tmp_name']))
{
include_once("gallery_edit_script.php");
}
else
{
header("Location: inventory_list_sales.php");
}
Funny thing is I tried this with another site I'm working on with almost identical code as I copied all the files and only edited small parts and it doesn't work lol
Thanks for everyone's help :)
I have one HTML form where I enter the Text fields and finally upload a image file into the server.
(HTML file:<input type="file" name="filename"/ >)
I use Ajax technique and HTTP POST request to perform this task.
But I'm unable to upload file but can see the text filed values in database.I'm trying to upload image file into a folder using getimagesize($_FILES['filename']['tmp_name']and move_uploaded_file() to move from temp folder to specific folder.
FirePHP is showing the warning message as :getimagesize() [function.getimagesize]: Filename cannot be empty in my .php file on line 19
line 19 contains the getimagesize() statement.
Could anybody please let me know is it possible to upload a file using ajax technique?or any other better way to do this?
Any help is greatly appreciated.
I will give you three basic ways to work on AJAX-based file uploads..
1) Faking AJAX-based file uploads - You'd create an iframe on the page (that you can hide with CSS), you can target your form to POST to that iframe.
<form target='upload_target' id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;display: none;"></iframe>
</form>
2.) FILE API: if your browser supports it, you can use the sophisticated FILE API to do what I'll call a Pure AJAX file upload - https://developer.mozilla.org/en/using_files_from_web_applications
3) You can use existing JQuery plugins such as Ajax File Upload and Multiple File Upload. Please do look up more such from the JQuery site, evaluate for cross-browser compatibility and use.
Its pretty simple to add form fields for uploading files etc, but I am after one that I can highlight several files and upload them all in one field.
Is there a plugin of some sort that can allow me to do this? I cant find one, also, do v1 plugins work with v2?
I should be able to add the ability to show the files and delete them myself but if this was included it would be very nice.
Thanks.
EDIT: I am using CakePHP!
You can do that with normal php code
If you use multiple input fields you can set
name="file[]".
That will put them in an array when you upload them
($_FILES['file'] = array ({file_array},{file_array]..))
Or try
Plugin
Update: For Cakephp
Use uplodify it will allow you to upload multiple files
Refer this http://www.uploadify.com/demos/
in HTML5 you can use like below
<form action='#' method='post' enctype='multipart/form-data'>
<input name='uploads[]' type=file multiple>
<input type='submit'>
</form>
html5
using PHP
Well, you could just try using the attribute multiple="multiple" on your file input, and see how it goes. Most modern browsers support this, and those who don't would limit it to 1 file.
If you name it with brackets PHP will probably make it an array.
<input type="file" multiple="multiple" name="files[]" />
My PHP book gives a template HTML form for uploading a file:
<form action="upload.php" method="post" enctype="multipart/form-data"/>
<div>
<input type="hidden" name="MAX_FILE_SIZE" value="10000000"/>
<label for="userfile">Upload a file:</label>
<input type="file" name="userfile" id="userfile"/>
<input type="submit" value="Send File"/>
</div>
</form>
The book displays it as "Upload a file:" [textbox] [Browse...] [Send File]
I copied it verbatim, and the result I'm getting is "Upload a file:" [Choose File] "no file chosen" [Send File]
I'm wondering why the discrepancy exists. Is there a way around it? I'm using XHTML Transitional. No doctype is given in the book. But I doubt that's the issue.
The script I'm writing aims to take the file the user chooses, process it, and write the result into another file that doesn't exist yet. I'm asking this question because it would be useful to let the user more easily copy the initial file path/name, paste it into the other field, and just change a part of it.
(Also: why the difference between "Browse..." and "Choose File"? I tried manually setting the value of the "userfile" field to "Browse..." but nothing happened. This is less important but I'm curious nonetheless.)
It is probably showing a different browser and/or version.
It sounds like you are looking at it under Safari and the book has screenshots of IE, for example.
There are a few ways to get complete control of file uploading and the <input type="file" /> element. You can use Flash, or you can set the input to opacity: 0 and then position what you want beneath it.
Some time ago the browser engines took almost complete control over the input type="file" - fields, since it nowadays is regarded as a security issue. For example the days before that you could easily prefill the file input filed with some path and filename (e.g. something like /etc/passwd) and hide the field, so sending the form you would not remark that you're also sending the file...
That's why for example you could not preset the filename of such a field and that's also why browsers now all do their own thing with these special input fields.
As Alex said above, you could get around this, but it will be some hassle, because it would mean to "fake" the file input field.