How to view the selected file names in the Multiple file?

Asked

Viewed 214 times

0

Hello I have a Multiple file and would like to show inside it the name of the selected files, I have a code that lists the names in the console.log, more as I could add them within the input type itself?

$(".fileMultiplo").change(function() {
  readURL(this);
});

function readURL(input) {
  if (input.files && input.files[0]) {
      for (let i = 0; i < input.files.length; i++){
          console.log(input.files[i].name)
      }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



            <div class="col-md-12 mb-3">
              <div class="custom-file">
                <input type="file" multiple class="custom-file-input fileMultiplo" name="uploads[]" id="customFileMultiplo" 
                data-toggle="tooltip"  title="Selecione vários arquivos" required>
                <label class="custom-file-label" for="customFile">Selecione vários arquivos</label>
                <div class="invalid-feedback">
                  Selecione um ou mais de um arquivo
                </div>
              </div>
            </div>

javascript jquery

  • It would if I showed the names inside a span, and then reposition that span where do you want? Or necessarily it has to be in the input file?

  • @Gutoxavier, today the file name and viewed inside the input file, only 1 of them, I could even show in a span, more would be inside the span and inside the input file, I appreciate the help!

1 answer

0

See if this idea solves the situation:

  • I created a span in front of the input file
  • I just add content to that span if more than one file is selected.

Follows the code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-12 mb-3">
    <div class="custom-file">
        <input type="file" multiple class="custom-file-input fileMultiplo" name="uploads[]" id="customFileMultiplo" data-toggle="tooltip"  title="Selecione vários arquivos" required>
        <span id="nome"></span>
        <label class="custom-file-label" for="customFile">Selecione vários arquivos</label>
        <div class="invalid-feedback">
            Selecione um ou mais de um arquivo
        </div>
    </div>
</div>

$(".fileMultiplo").change(function() {
  readURL(this);
});

function readURL(input) {
  if (input.files && input.files[0]) {
      if(input.files.length > 1){
        for (let i = 0; i < input.files.length; i++){
            console.log(input.files[i].name)
            $('#nome').append(input.files[i].name);
        }
    }else{
        $('#nome').html('');
    }
  }

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.