Append Multiple input file upload upon browse

Question

I am trying to append multiple files when the browse button is clicked but what happen is when I clicked the browse button and select multiple files again, the browsed file get reset(disappear) or get replaced with the new multiple browsed files. I am doing something similar to http://jsfiddle.net/aHrTd/4/ but instead of single file at a time, I would like to do multiple files at a time

<input id="file-upload-plans" type="file" class="file" multiple="multiple" name="floorplans[]" data-show-upload="false" data-show-caption="false" data-show-remove="true" accept="image/jpeg,image/png" data-browse-class="btn btn-default">

fzldn · Accepted Answer · 2016-01-14 09:29:53Z

1

maybe this http://jsfiddle.net/aHrTd/67/ could help you

HTML

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" class="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>

JS

$(function(){
    $(document).on('change', '.file', function(){
      var e = $(this);
      if(e.val()){
        e.clone().insertAfter(e);
      }
    });
  });

answered Jan 14, 2016 at 9:29

fzldn

194 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vahid Msm · Accepted Answer · 2016-01-14 09:47:12Z

1

Here is a working demo and u can see outputs there.

$("#file").change(function() {
    var result = $(this)[0].files;
    for(var x = 0;x< result.length;x++){
       var file = result[x];
       // here are the files
        $("#output").append("<p>" + file.name + " (TYPE: " + file.type + ", SIZE: " + file.size + ")</p>");  
    }
    
});

p{
  background-color: cyan;
  font-family: open sans;
  max-width: 350px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file"  multiple="multiple"/>
<div id="output"></div>

edited Jan 14, 2016 at 9:47

answered Jan 14, 2016 at 9:33

Vahid Msm

1,1027 silver badges16 bronze badges

4 Comments

JeVic Over a year ago

it works but only the last browse files get uploaded

Vahid Msm Over a year ago

@JeVic What do you mean by last browse files? this is what it suppose to do, can u explain more?

JeVic Over a year ago

for example you browse 3 files then you browse another 4 files total of 7 files, the first 3 files don't get uploaded but the 4 files get uploaded

Vahid Msm Over a year ago

@JeVic With just input files u can't achieve this, for getting more control about your files i recommend u to use this jquery library which handles file uploading process great and u can interact with uploader. blueimp.github.io/jQuery-File-Upload

kosman · Accepted Answer · 2016-01-14 09:14:24Z

0

I'm not 100% sure but you probably could save the added files with javascript. A few examples here.

https://developer.mozilla.org/en-US/docs/Web/API/FileList

answered Jan 14, 2016 at 9:14

kosman

784 bronze badges

Collectives™ on Stack Overflow

Append Multiple input file upload upon browse

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related