HTML5/JS - Hiển thị nhiều đầu vào tệp trong div

Question

Tôi đang sử dụng tính năng chọn tệp 'nhiều' tuyệt vời của HTML5.

<input type="file" id="fileInput" onChange="runTest()" multiple> 

Tôi muốn hiển thị tên tập tin được lựa chọn bên dưới trường đầu vào và làm cho nó trông khá với CSS, tuy nhiên ...

Nếu tôi chạy một chức năng kiểm tra JS, rằng 'cảnh báo' tôi về giá trị trường đầu vào, nó chỉ cho thấy một tập tin bất kể tôi chọn 10.

function runTest() { 
var fileInput = document.getElementById('fileInput').value; 
alert("You selected: "+fileInput); 
} 

tôi đã làm điều này trong khi tôi đã có một lĩnh vực đầu vào 'đơn' tập và làm việc ổn nhưng bây giờ nó là 'nhiều', nó doesn' Tôi thích nó

Mọi đề xuất?

Answer 1

Vâng, có vẻ như giá trị hoặc val(), được trả về bởi phần tử là tên của tệp được chọn cuối cùng. Để giải quyết vấn đề này, bạn nên sử dụng bản chất của các sự kiện nhiều thay đổi:

$('input:file[multiple]').change(
    function(){ 
     $('ul').append($('<li />').text($(this).val())); 
    }); 

JS Fiddle demo.

Và nhập tên vào danh sách (như trong ví dụ) hoặc thêm giá trị mới nhất vào mảng hoặc có thể sử dụng/tạo đầu vào bị ẩn để lưu trữ tên tệp như bạn cảm thấy phù hợp nhất với ứng dụng của bạn.

Để truy cập vào tập tin tên (cũng như ngày sửa đổi cuối cùng, tập tin có kích thước ...) bạn có thể (thử nghiệm trong Chromium 12/Ubuntu 11.04) sử dụng như sau:

$('input:file[multiple]').change(
    function(e){ 
     console.log(e.currentTarget.files); 
    }); 

JS Fiddle demo.

---

Sửa để làm cho trên hơi hữu ích hơn, và hy vọng, minh chứng:

$('input:file[multiple]').change(
    function(e){ 
     console.log(e.currentTarget.files); 
     var numFiles = e.currentTarget.files.length; 
      for (i=0;i<numFiles;i++){ 
       fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024; 
       filesize = Math.round(fileSize); 
       $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output')); 
       $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last')); 
      } 
    }); 

JS Fiddle demo.

Các thức mã khối được cập nhật, do sự thay đổi trong Webkit, Chrome 24 (mặc dù có thể từ trước đó), bởi nextgentech trong ý kiến, bên dưới:

$('input:file[multiple]').change(
    function(e){ 
     console.log(e.currentTarget.files); 
     var numFiles = e.currentTarget.files.length; 
      for (i=0;i<numFiles;i++){ 
       fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024; 
       filesize = Math.round(fileSize); 
       $('<li />').text(e.currentTarget.files[i].name).appendTo($('#output')); 
       $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last')); 
      } 
    }); 

JS Fiddle demo.

Answer 2

Đặt điểm ngắt trên cuộc gọi cảnh báo và xem nội dung của tệp biếnInInfo, xem có thuộc tính nào khác chứa tất cả tên tệp hay không.

Answer 3

đang tuyệt vời nhưng đối tượng cần phải được trống cho mỗi thay đổi:

$('input:file[multiple]').change(
function(e){ 
    $('#output').empty(); 
    console.log(e.currentTarget.files); 
    var numFiles = e.currentTarget.files.length; 
     for (i=0;i<numFiles;i++){ 
      fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024; 
      filesize = Math.round(fileSize); 
      $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output')); 
      $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last')); 
     } 
}); 

Cảm ơn bạn David ...