I have a simple input for "file".
I was wondering how I go about making it so you can select multiple files using one input.
<input name="sliderfile" id="sliderfile" type="file" />
Basically, multiple select in one browse window.
Any help would be appreciated,
Thanks!
You can use the <input type="file"> with the multiple attribute.
<input name="sliderfile" id="sliderfile" type="file" multiple>
jsFiddle Example.
Note: IE6 won't like it.
You can use <input name="sliderfile" id="sliderfile" type="file" multiple /> though if you are considering those poor blokes using old versions of IE you may have to use JS to imitate something like this, there is a fash component that works in similar way, the component is known as swfupload, jQuery has some plugins based on it, popular one is uploadify
<input name="sliderfile[]" id="sliderfile" type="file" />
accessible with
$_FILES['sliderfile'][0];
$_FILES['sliderfile'][1];
$_FILES['sliderfile'][2];
....
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">
I have a huge form that lets users (along with a lot of other inputs) upload multiple images, like this:
<input type="file" id="product_images" class="hidden" name="upload[]" multiple>
<input type="file" id="product_images_2" class="hidden" name="upload[]" multiple>
...
Now, when there is an error in a certain input (e.g. String for "description"-field too short), the page reloads. After this reload I need to keep all the posted data in all the inputs. For a text input I know how to do it, like this:
<input name="name" type="text" value="<?php echo $_POST['name']; ?>"/>
but, how can I achieve this for the file inputs?
I tried something like this:
<input type="file" id="product_images" name="upload[]" multiple value="<?php print($_POST['upload']); ?>">
Did not work though. Any ideas? Thanks!
Maybe that's because you are validating in server, try to validate your field in browser, if the server reloads it will loose all your data saved in fields.
Try this validator personally i like it:
http://jqueryvalidation.org/
Hop it helps
$_SESSION["image_path"] = $_POST['upload'];
<input type="file" id="product_images"<?php values= if(empty($_session['image_path'])) {} else { echo $_session['image_path']; } ?>class="hidden" name="upload[]">
after you retrieved ,Destroy the session
Try to use pattern in your input bar that will help you , you can do it very easily
http://www.wufoo.com/html5/attributes/10-pattern.html
http://www.w3schools.com/tags/att_input_pattern.asp
When a form has multiple image inputs and the server side uses their names and/or values to distinguish which one was clicked, it works perfectly in FireFox. However, people often write the whole thing before finding out that HTML specifies that nothing has to be sent, and thus some browsers are not sending it.
It's not about sending any random object, but sending a pair as input_name=input_value. The best worst-case scenario example here would be what I've encountered: A list of elements all in one form and all accompanied by buttons with name="delete" value="<item_id>"
What can I do to fix this problem?
Per the HTML spec, clicking on an IMAGE input will return the parameters:
name.x=x-value and name.y=y-value where "name" is the value of the name attribute
with x-value and y-value corresponding to the click position.
Sure, the server code to deal with this will be a little annoying, but you could just check all the query parameter keys with a regular expression:
/^(.*)\.[xy]$/
to search for the IMAGE input keys to determine which IMAGE was clicked.
I tried with this sample:
<form action="#" method="GET">
<input type="text" name="t" value="Text here"><br>
<input type="image" name="a" value="1" src="http://sstatic.net/so/img/logo.png"><br>
<input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&d=identicon&r=PG"><br>
</form>
And I get the following urls:
FF 3.6: x.html?t=Text+here&b.x=19&b.y=17&b=2#
IE 8: x.html?t=Text+here&b.x=22&b.y=18
IE 7: x.html?t=Text+here&a.x=185&a.y=51
Opera 10: x.html?t=Text+here&a.x=107&a.y=53#
Chrome: x.html?t=Text+here&b.x=20&b.y=17&b=2#
So it seems that all the browsers are sending something image related, even if it isn't the image name directly. Since you need to scan for all the image names that you expect to see you can just scan for imagename.x instead. This seems to be how the spec indicates it should work.
The problem was half solved up to now: like here
But it didn't allow to get the value!
The correct answer is:
$('input[type=image]')
.unbind('mousedown')
.mousedown(function(){
$(this).after('<input type="hidden" name="'+$(this).attr('name')+'" value="'+$(this).attr('value')+'" />');
});
This code creates a hidden duplicate of the input when user starts clicking it. The unbind('mousedown') is to secure it happens once even if You put the code in multiple places in a weird application and it might be called more than once.
I recommend putting it in $(document).ready();
I think I am/was having a similar problem. I wanted to click on an thumbnail and have it enlarged on a different page. I was trying to do this with PHP alone but I finally had to use the tag with the . Worked great for FF3 and safari but the INPUT IMAGE values did not post for IE9 or FF9.
My work around was to put each image in its own form and then also use a hidden input to send the needed data.
<table>
<tr>
<td>
<form method="post" class="form_photo">
<input type="image" name="img_photo" value="does nothing in IE9 or FF9" />
<input type="hidden" name="photo" value="nameoftheimage.jpg" />
</form>
<form method="post" class="form_photo">
<input ...>
<input ...>
</form>
<form> ...
</td>
</tr>
Then I discovered the forms displayed vertical, making it very odd. CSS to the rescue.
.form_photo { display:inline; }
seems to have solved the vertical problem. Now the user can click on the thumbnail and the value now passes in all the browsers I have access to testing.
Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use you images so long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
I have created a page to upload a file (single) to my server :
<form action="<?php echo $_SERVER['PHP_SELF'];?>?e_name=<?php echo $_GET['e_name']; ?>" method="post" enctype="multipart/form-data">
<input type="file" id="upload-video" name="userfile" onchange="handleFiles(this.files)" class="input"/>
<div>
<input type="submit" name="submit" value="העלה" class="button"/>
</div>
</form>
and i was wondering how i could add a progress bar to it.
i have noticed that in chrome you can see the upload percentage and wanted to know if there is a way to use that information.
if not, what is a good way to do this?
i have been looking around but always seem to get confused with what i find, if someone could explain it simply that would be grate.
thank you very much.
I've been using a jQuery plugin to do all my file uploads, seems quicker than trying to reinvent the wheel. It includes the form plus the progressbar and hints on how to process on the backend. Plus, they've done all the bugchecking for you.
Jquery File Upload Plugin
check this example , this do what you want
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[]" />