Some time ago, I crafted this piece of JavaScript for my personal website:
var SITE = SITE || {};
SITE.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button'),
$fakeFile = $this.siblings('.file-holder');
if(newVal !== '') {
$button.text('File Chosen');
if($fakeFile.length === 0) {
$button.after('<span class="file-holder">' + newVal + '</span>');
} else {
$fakeFile.text(newVal);
}
}
};
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<span class=\"file-wrapper\"><input type=\"file\" name=\"screenshot[]\" id=\"screenshot\" /><span class=\"button\">Choose a screenshot</span></span>";
document.getElementById(divName).appendChild(newdiv);
counter++;
$('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
}
}
$(document).ready(function(){
$("#addss").click(function(){
addInput("screenshots");
});
});
Now, you can utilize the array to handle data in PHP or any other platform you prefer.
Below is the HTML structure:
<div id="screenshots">
<span class="file-wrapper">
<input type="file" name="screenshot[]" class="screenshot" />
<span class="button">Choose a screenshot</span>
</span>
</div>
<input type="button" id="addss" value="+Screenshot" class="btn" />