Why multiple attribute in input tag of html is not working?

Question

I can't seem to get the multiple tag working in my input. I am playing around with taking multiple photos, which will be incorporated into a health and safety form later on. At the moment all I can do is take one photo.

How am I using it incorrectly. I know it can be used with the type="file". I am hoping it is a simple syntax error

<!DOCTYPE html>
<html>
<body>

<h2>The multiple Attributes</h2>
<p>The multiple attribute specifies that the user is allowed to enter more than one value in the input element.</p>

<form action="/action_page.php">
  Take photos: <input type="file" accept="image/*" capture="camera" multiple><br>
  <input type="submit">
</form>

<p>I wonder how I can take more than one photo.</p>

<p><strong>Note:</strong> The multiple attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Worked your example for me here - codepen.io/jainshravan123/pen/WyMXEe — Shravan Jain
– Shravan Jain, Commented Jun 20, 2018 at 3:24
Possible duplicate of How can I select and upload multiple files with HTML and PHP, using HTTP POST? — channasmcs
– channasmcs, Commented Jun 20, 2018 at 3:25
When I take a photo, the photo's filename appears next to the "Choose files" button. When I take another photo it is overwritten. So I added more <input> tags (1 for each photo) and now it is working and uploaded the photos. Now I either limit it to a number of photos or change it by adding lines in real time. I also need to look at how to preview the photos before uploading. (Not necessarily editing, just to preview). — Simon King
– Simon King, Commented Jun 20, 2018 at 21:38

channasmcs · Accepted Answer · 2018-06-20 03:24:36Z

2

need to be like this

   <form action="/action_page.php"  method="POST" enctype="multipart/form-data">

 Take photos: <input type="file" name="files[]" type="file" multiple="multiple" accept="image/*" capture="camera" multiple><br>
 <input type="submit">
</form>

answered Jun 20, 2018 at 3:24

channasmcs

1,15612 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

errakeshpd · Accepted Answer · 2020-07-07 20:42:39Z

2

Your form should have attribute as 'enctype'. And the file input you should have an attribute as "multiple", that will do job for you.

Example:

    <form action="" enctype="multipart/form-data" method="post">
   <div><label for='upload'>Add Attachments:</label>
   <input id='upload' name="upload[]" type="file" multiple="multiple" />
   </div></form>

But I suggest you to use multiple file uploader like uploadify.

edited Jul 7, 2020 at 20:42

answered Jun 20, 2018 at 3:22

errakeshpd

2,5722 gold badges31 silver badges35 bronze badges

1 Comment

errakeshpd Over a year ago

You need to includehealth and safety incident inputs also in the same form. you may need to try out 'uploadify', if you choose multiple files in one time then will not be an issue, but if you choose multiple time surely it will overwritten. for resolving this you may need to dynamically generate input or use jquery file uploaders. hope this comment helps.

Varun · Accepted Answer · 2018-06-20 03:42:51Z

1

method="POST" enctype="multipart/form-data"

You have missed enctype which will not upload file and method should be post

enctype(ENCode TYPE) attribute specifies how the form-data should be encoded when submitting it to the server. multipart/form-data is one of the value of enctype attribute, which is used in form element that have a file upload. multi-part means form data divides into multiple parts and send to server.

edited Jun 20, 2018 at 3:42

answered Jun 20, 2018 at 3:30

Varun

3064 silver badges20 bronze badges

Collectives™ on Stack Overflow

Why multiple attribute in input tag of html is not working?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related