{"id":753,"date":"2012-06-18T13:28:30","date_gmt":"2012-06-18T13:28:30","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=753"},"modified":"2012-07-13T06:24:17","modified_gmt":"2012-07-13T06:24:17","slug":"create-multiple-file-uploader-using-php-html-and-jquery","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/php\/create-multiple-file-uploader-using-php-html-and-jquery\/","title":{"rendered":"Create multiple file uploader using php, html and jQuery."},"content":{"rendered":"

When you have to upload an unknown number of files with php, adding some jQuery<\/strong> script can make your job a lot easier than you think. On this post I\u2019ll show you how to do that in no time and effortless. <\/p>\n

First, let\u2019s create the html form and add two \u201cbuttons\u201d that will be used for adding or removing an uploading field from the form. <\/p>\n

\r\n<span class="add_field">+<\/span>\r\n<span class="remove_field">-<\/span>\r\n\r\n<form action="upload.php" method="POST" enctype="multipart\/form-data">\r\n\t<div class="input_holder">\r\n\t\t<input type="file" name="uploaded_files[]" id="input_clone"\/>\r\n\t<\/div>\r\n\t<input type="submit" value="upload_files" \/>\r\n<\/form>\r\n<\/pre>\n
The span elements will be out add\/remove buttons so we\u2019ll add a listener to them to know when someone want to add or remove a field from the form.<\/p>\n
Because it\u2019s an uploading form, we have to specify that to the browser. We do this by adding enctype=”multipart\/form-data”<\/strong> as an attribute to the form. <\/p>\n
Also we add a file input type which has a unique id which will allow us to clone the element as many times as we want. The name of the field is given as an array in order to be able to stock up multiple data information without being forced to stock them with different names or add numbers or any other way of messing up the code.<\/p>\n
After this, let\u2019s add the listener on the buttons so the \u201cunknown number of fields\u201d to be feasible.<\/p>\n
 \r\n<script type="text\/javascript">\r\n\r\n        $('.add_field').click(function(){\r\n\t\r\n            var input = $('#input_clone');\r\n            var clone = input.clone(true);\r\n            clone.removeAttr ('id');\r\n            clone.val('');\r\n            clone.appendTo('.input_holder'); \r\n\t\t\r\n        });\r\n\r\n        $('.remove_field').click(function(){\r\n\t\t\r\n            if($('.input_holder input:last-child').attr('id') != 'input_clone'){\r\n                  $('.input_holder input:last-child').remove();\r\n            }\r\n\t\t\r\n        });\r\n\r\n<\/script>\r\n<\/pre>\n
Now let\u2019s explain this part.<\/p>\n
When the user clicks the ‘.add_field’ button we have to do several actions. <\/p>\n
\r\nvar input = $('#input_clone');\r\n<\/pre>\n
Here we get the first input of the field by its id.<\/p>\n
\r\nvar clone = input.clone(true);\r\n<\/pre>\n
We clone the element.<\/p>\n
\r\nclone.removeAttr ('id');\r\n<\/pre>\n
Remove the id attribute. We don\u2019t want on the same page to have 2 or more elements with the same id.<\/p>\n
\r\nclone.val('');\r\n<\/pre>\n
Here we remove the value of the input. This way we make sure that the user will not upload, by mistake, the same file twice or several times.<\/p>\n
\r\nclone.appendTo('.input_holder'); \r\n<\/pre>\n
And last but not least we add the input to the div that holds them.<\/p>\n
After we finished with the adding part, maybe the user abused too much of the “+” button and there are way too many input fields. Let\u2019s make possible for him to remove them.<\/p>\n
First thing first here, we have to make sure that he does not abuse of the “-” button and remove all input files. We test if the input it’s not the original one (has the unique id), and if doesn’t have it we remove it.<\/p>\n
And now, our last step of this article is the php file that handles the uploading.<\/p>\n
\r\n<?php \r\n\r\nif(isset($_FILES ['uploaded_files']))\r\n{\r\n     foreach($_FILES['uploaded_files']['name'] as $key=>$value)\r\n     {\r\n          if(is_uploaded_file($_FILES['uploaded_files']['tmp_name'][$key]) && $_FILES[['uploaded_files']['error'][$key] == 0)\r\n          {\r\n              \t$filename = $_FILES['uploaded_files']['name'][$key];\r\n                $filename = time().rand(0,999).$filename;\r\n                            \r\n                if(move_uploaded_file($_FILES['uploaded_files']['tmp_name'][$key], 'uploads\/'. $filename))\r\n                {\r\n               \t      echo 'The file '. $_FILES['uploaded_files']['name'][$key].' was uploaded successful';\r\n                }\r\n                else\r\n                {\r\n                      echo 'There was a problem uploading the picture.';\r\n                } \r\n          }\r\n          else\r\n          {\r\n   \t        echo 'There is a problem with the uploading system.';\r\n          }\r\n     }\r\n}\r\n\r\n?>\r\n<\/pre>\n
Here, first time you check if there are any files that need to be uploaded, by checking if the $_FILES<\/strong> variable is set. If there are any files ready for upload, then for each file you have to check if the file was successfully uploaded and if there are no errors. If so, your next step is to make sure your file has a unique name. On this I use a little trick renaming my file based on the current time and a random number and the filename. This way, the possibility of 1 or more users to upload a file with the same name is almost, if not, 0.<\/p>\n
The last step is to check if the file was moved on the upload folder. If everything goes well you will get, for each file, a message that will tell you that the file was successfully uploaded.<\/p>\n
 There are a few problems that might occur and you can avoid them by:
\n1.\tMake sure the uploading folder exists. The move_uploaded_file()<\/a> function will not automatically create it for you.
\n2.\tIf you want you can set a limit for the files. This limit has to be equal or lesser than post_max_size<\/strong> located in your php.ini<\/strong> file.
\n3.\tThe uploading folder has to have the permission for writing on.<\/p>\n
You can download<\/a> the file.<\/p>\n
If you have something to say about this subject please feel free to use the comment form below.<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
When you have to upload an unknown number of files with php, adding some jQuery script can make your job a lot easier than you think. On this post I\u2019ll show you how to do that in no time and effortless. First, let\u2019s create the html form and add two \u201cbuttons\u201d that will be used …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[86,105,35],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/753"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=753"}],"version-history":[{"count":26,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/753\/revisions"}],"predecessor-version":[{"id":785,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/753\/revisions\/785"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}