2

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>
Shravan Jain
  • 640
  • 1
  • 9
  • 30
Simon King
  • 139
  • 13
  • define "not working". Do you get an error message? – Cfreak Jun 20 '18 at 03:15
  • Worked your example for me here - https://codepen.io/jainshravan123/pen/WyMXEe – Shravan Jain Jun 20 '18 at 03:24
  • try this https://stackoverflow.com/questions/1175347/how-can-i-select-and-upload-multiple-files-with-html-and-php-using-http-post – channasmcs Jun 20 '18 at 03:25
  • 1
    Possible duplicate of [How can I select and upload multiple files with HTML and PHP, using HTTP POST?](https://stackoverflow.com/questions/1175347/how-can-i-select-and-upload-multiple-files-with-html-and-php-using-http-post) – channasmcs Jun 20 '18 at 03: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 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 Jun 20 '18 at 21:38

3 Answers3

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.

errakeshpd
  • 2,343
  • 2
  • 24
  • 34
  • 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. – errakeshpd Jun 20 '18 at 04:17
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>
channasmcs
  • 1,058
  • 11
  • 27
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.

Varun
  • 181
  • 1
  • 16