I've created a functionality for user(s) to be able to upload multiple images to a website with different html input tags like so:
<input type="file" name="photos[]" required>
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
The idea is to allow only a maximum of 5 images to be uploaded. I know I can just do <input type="file" name="photos[]" multiple> but this doesn't allow them to choose files from different folders from their device, hence the reason why I have multiple <input type="file">.
I know this pattern works well with radios and checkboxes, but the issue I'm having now is to validate the field as one and not multiple inputs.
I know there are javascript/jquery libraries I can use to achieve this, but I really do not want to use any.
Is there a workaround towards achieving this?
Related
I am using this method below to hide the regular provided style and replace it with my own custom css (class="button") and now that I have done so, drag and dropping files no longer works, because the entire element is hidden.
Is there any work around to this preferably not using JavaScript?
<label class="button" for="file">
<input id="file" type="file" style="display:none;">
Browse
</label>
Is there a way to show only .xxx files in the default file chooser dialog.
xxx may be not-known file types, such as abc, efg etc.
I'm using html5 so it may have new support for this type of things.
Thanks!
The HTML 5 accept attribute on file input elements is for this purpose. E.g.:
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
For others arriving here, these are some very handy predefined sets:
<input type="file" accept="image/*"/>
<input type="file" accept="video/*"/>
<input type="file" accept="audio/*"/>
As far as I'm aware, plain html or javascript won't allow me to upload multiple files (images) in one field (correct me if I'm wrong).
Is this possible in html5 or any other way except flash?
I'd like to give my users the ability to select up to 5 images at once and upload them all.
Use the multiple attribute.
<input type="file" name="myFiles" multiple>
This works for me:
<input size="40" type="file" name="_attachments[]" multiple="multiple"/>
I would have thought this would be super easy to find an answer to on the interwebs but apparently not.
On an HTML page, I wish to allow a user to select multiple files and upload them to my server. Specific context is that the user needs to choose a resume file and a cover page to apply for a job.
Important considerations:
I'm not interested in an HTML5 or flash or tricky solution - just the basic question, is it possible with plain old HTML in a plain old browser.
I am okay with having multiple upload fields and multiple buttons to choose each file.
A single submit button needs to submit them both.
Needs to support IE6.
Is this possible? It seems very hard to find a straight answer.
For example would something like this work? (I grabbed it from somewhere on the net sorry if I have not credited the source)
<form action="/py/uploadfile" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label>upload file<input type="file" name="file[]" id="file1" /></label>
<label>upload file<input type="file" name="file[]" id="file2" /></label>
<label>upload file<input type="file" name="file[]" id="file3" /></label>
<label><input type="submit" name="button" id="button" value="Submit" /></label>
</form>
thanks
Just add another input[type="file"], and make sure it has a different name:
<form action="...">
...other fields...
<input type="file" name="coverLetter" />
<input type="file" name="resume" />
...other fields...
<input type="submit" value="send" />
</form>
Ok I really didn't know how else to sum it up for the title. I need to create a form where a user can specify an existing file, but I don't need to upload it (it's on a shared server already accessible) -- I just need to grab the filename and save it in the database so it's linked to other data.
I thought about the input tag as it provides a convenient already done interface to the user's filesystem, but I don't know if it's possible to use it without the acutal upload (leaving out enctype="multipart/form-data" doesn't seem to work). Can I tweak this to make it work, or is there any way to do it other than writing a custom mini file browser?
EDIT: I need the full path name of the file, asking the users to enter it is out of the question...
You could place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>