Add Multiple File Upload HTML Tag In Form Using Pure JavaScript

So, you need to get files from your user’s browser to your server. Not just one file though. A whole bunch. A batch even. And each file needs to be able to have its own meta data sent with it, i.e. Title, Caption, Copyright, Tags, etc. And asking your user to send them one at a time is not an option.

There are many snippet available online or on many others Blog and website but every one is not able to optimize your blog or website so your need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1.) Pure JavaScript Added.
2.) No JQuery File.
3.) Simple HTML-CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JavaScript:

<script>
function addElement(parentId, elementTag, elementId, html) {
// Adds an element to the document
var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
var fileId = 0; // used by the addFile() function to keep track of IDs
function addFile() {
fileId++; // increment fileId to get a unique ID for the new element
var html = '<input type="file" name="uploaded_files[]" /> ' +
'<a href="" onclick="javascript:removeElement(file-' + fileId + '); return false;">Remove</a>';
addElement('files', 'p', 'file-' + fileId, html);
}
</script>

HTML:

<form enctype="multipart/form-data" action="" method="post">
<p>Upload file(s)</p>
<div id="files">
<p><input type="file" name="uploaded_file[]" /></p>
</div>
<p><input type="button" value="Add File" onclick="addFile();" /></p>
</form>

Customization:

1.) Edit Your HTML-CSS-JAVASCRIPT As Per Your Requirements. Rest Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave