एचटीएमएल 5/जेएस - div

Question

में एकाधिक फ़ाइल इनपुट प्रदर्शित करें मैं HTML5 की अद्भुत 'एकाधिक' फ़ाइल चयन सुविधा का उपयोग कर रहा हूं।

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

मैं इनपुट क्षेत्र नीचे चयनित फ़ाइल नाम प्रदर्शित करने और यह सीएसएस के साथ सुंदर लग रही बनाने के लिए, लेकिन चाहते हैं ...

अगर मैं एक परीक्षण जे एस समारोह चलाने के लिए, कि 'अलर्ट' की मुझे इनपुट फ़ील्ड का मान है, यह केवल एक फ़ाइल परवाह किए बिना मुझे 10.

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

मैं जब मैं एक 'एकल' फ़ाइल इनपुट क्षेत्र था और ठीक से काम किया के लिए यह कर रहा था के चयन का पता चलता है, लेकिन अब यह एक से अधिक 'है, यह नहीं करता है' टी पसंद है।

कोई सुझाव?

Answer 1

अच्छा, यह मान लगता है, या val(), तत्व द्वारा लौटाया गया केवल चयनित अंतिम फ़ाइल का नाम है। इस हल करने के लिए, यह बहु-परिवर्तन की घटनाओं की प्रकृति का उपयोग करने के लिहाज से हो सकता है:

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

JS Fiddle demo।

और या तो किसी सूची में नामों को उदाहरण के रूप में आउटपुट करें (या उदाहरण के रूप में), या संभवतः, फ़ाइल नामों को संग्रहीत करने के लिए छिपे हुए इनपुट का उपयोग/बनाएं, जैसा कि आपको लगता है कि आपके एप्लिकेशन के अनुरूप सबसे अच्छा होगा।

फ़ाइल-नाम का उपयोग करने के (और साथ ही अंतिम संशोधित तिथि, फ़ाइल आकार ...) आप (क्रोमियम 12/Ubuntu 11.04 में परीक्षण) कर सकते हैं निम्नलिखित का उपयोग करें:

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

JS Fiddle demo।

---

संपादित से थोड़ा ऊपर और अधिक उपयोगी और हमें उम्मीद है कि प्रदर्शन-परक बनाने के लिए:

$('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।

अंतिम कोड-ब्लॉक, अद्यतन वेबकिट में परिवर्तन के कारण, क्रोम 24 (हालांकि संभवतः पहले से),, nextgentech द्वारा टिप्पणी में नीचे:

$('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

अलर्ट कॉल पर ब्रेक पॉइंट सेट करें और वेरिएबल फ़ाइल इनपुट की सामग्री पर नज़र डालें, देखें कि क्या कोई अन्य संपत्ति है जिसमें सभी फ़ाइल नाम हैं।

Answer 3

बहुत बढ़िया कोड लेकिन वस्तु प्रत्येक परिवर्तन के लिए खाली होने की जरूरत है:

$('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')); 
     } 
}); 

आप डेविड धन्यवाद ...