I want to ask a question regarding <input type="file" multiple>. For example a user selects 3 images at one time and if he wishes to select 2 more images before upload to add with last 3 images but it is not happening when a user selects last 2 images before upload the first 3 images gets removed from the file list and when user will upload images only last 2 images will be uploaded why is this happening. please help me. how to solve this problem.
-
1That's the browser-set behaviour and there's nothing you can do about it. If you have a dynamic number of uploads, perhaps you should make dynamic number of input fields, each for one image.Shomz– Shomz2014-03-31 10:04:07 +00:00Commented Mar 31, 2014 at 10:04
-
may be something in your code.bansi– bansi2014-03-31 10:04:13 +00:00Commented Mar 31, 2014 at 10:04
-
3You could use a HTML5 uploader and "stash" the images already selected, like in this example.Daniel W.– Daniel W.2014-03-31 10:06:22 +00:00Commented Mar 31, 2014 at 10:06
-
You could instantly upload the selected files via ajax.René Roth– René Roth2014-03-31 10:06:41 +00:00Commented Mar 31, 2014 at 10:06
-
@bansi u are asking for my code?Aisha– Aisha2014-03-31 10:07:14 +00:00Commented Mar 31, 2014 at 10:07
|
Show 8 more comments
2 Answers
It is the default behavior of the html file input tag. It will replace the previous selected files every time on every selection. Either you can use the formdata into the html and store the files into the form data on .onchange event of browse
I have face same problem like you
now i have found solution for that
<input type="file" id="attachfile" name="replyFiles" multiple> <!--File Element for multiple intput-->
<div id="#filelist"></div>
<script>
var selDiv = "";
var storedFiles = []; //store the object of the all files
document.addEventListener("DOMContentLoaded", init, false);
function init() {
//To add the change listener on over file element
document.querySelector('#attachfile').addEventListener('change', handleFileSelect, false);
//allocate division where you want to print file name
selDiv = document.querySelector("#filelist");
}
//function to handle the file select listenere
function handleFileSelect(e) {
//to check that even single file is selected or not
if(!e.target.files) return;
//for clear the value of the selDiv
selDiv.innerHTML = "";
//get the array of file object in files variable
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
//print if any file is selected previosly
for(var i=0;i<storedFiles.length;i++)
{
selDiv.innerHTML += "<div class='filename'> <span> " + storedFiles[i].name + "</span></div>";
}
filesArr.forEach(function(f) {
//add new selected files into the array list
storedFiles.push(f);
//print new selected files into the given division
selDiv.innerHTML += "<div class='filename'> <span> " + f.name + "</span></div>";
});
//store the array of file in our element this is send to other page by form submit
$("input[name=replyfiles]").val(storedFiles);
}
</script>
