CODEWITHSUNDEEP
jqueryfile-upload
user1683645
user1683645

Reputation: 1579

Display <input type="file"> filename

I'm trying to collect and prepend the filename of the selected input file into a table:

HTML

<div class="row-fluid">
  <div class="span12" id="upload-modal-button">
    <span class="btn btn-small btn-success fileinput-button">
      <span>Browse</span>
      <input type="file" name="file_1" enctype="multipart/form-data" />
    </span>
  </div>
</div>

<div class="row-fluid" id="image-table">
  <div class="span12">
    <table class="table table-striped" id="upload-list">
      <thead>
        <td>Filename</td>
        <td>State</td>
        <td>Rate</td>
      </thead>
      <tr id="filelist"></tr>
    </table>
  </div>
</div>

JQUERY

$('input[type=file]').change(function(e){
  $('#filelist').prepend('<td>'+$(this).val()+'</td>');
});

But I cant get the filename to display in the table.

Upvotes: 0

Views: 1436

Answers (1)

andres descalzo
andres descalzo

Reputation: 14967

if you work with ´jquery 1.8´, the selector ´type=file´ works correctly but if you work with ´jquery 1.6´ this selector will not work. the correct way is to use this type of selectors:

$('input[type="file"]')

or, you can use this type selector, with class:

HTML:

<input class="input-type-file" type="file" name="file_1" enctype="multipart/form-data" />

JS:

$('.input-type-file')

Upvotes: 1

Related Questions