I search through the net but didn't find much things on my problem. Hope someone here can help! As i write in the title I want to upload mutliple files, one at a time, with only one input. I tried to do this using JQuery as you can see below, but obviously it doesn't work! Anyone can help, please?
<!doctype html>
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script>
$(document).ready(function() {
$(document).on('change', '.file',function(){
$('<input type="file" name="file[]" class="file" size="60" />').appendTo($("#divAjout"));
$("div input:first-child").remove();
return false;
});
});
</script>
<title>test input file unique pour plusieurs fichiers</title>
</head>
<body>
<form action="" method="post" enctype='multipart/form-data'>
<div id="divAjout">
<input type="file" name="file[]" class="file" id='file' size="60" />
</div>
<input name="submit" type="submit">
</form>
<?php if(isset($_POST['submit'])){echo'<pre>'; print_r($_FILES);echo'<pre>';} ?>
</body>
</html>
You can clone input file with incrementing name attribute, like file[0], file[1], file[2], etc.
function readURL(input) {
var index = ($(input).data('index'));
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).parent().children('.newImage')
.attr('src', e.target.result)
.height(120);
};
reader.readAsDataURL(input.files[0]);
$('.addPh').show();
$('.addPh').last().clone().insertBefore($('#addPhoto')).hide();
++index;
$('.addPh').last().children('.photo_new').data('index', index).attr('name', 'photo_new['+index+']');
}
}
$(document).ready(function () {
$('#addPhoto').click(function () {
$('.photo_new').last().click();
});
});
See this example: https://jsfiddle.net/w0cd3Ls4/3/