1

以下のコードは単に機能しませんでした。 

document.getElementById('files').addEventListener('change', handleFileSelect, false);

このgetElementByIdがnullであるとfirebugによって報告されましたが、テキストを追加して機能しています。

コードは正しいようです...

更新：これはhtmlページです 

<script type="text/javascript">

   document.getElementById('files').addEventListener('change', handleFileSelect,   false);
   document.getElementById('username');
   function handleFileSelect(evt) {
   alert('i am called');
   var files = evt.target.files; // FileList object

 // files is a FileList of File objects. List some properties.
 var output = [];
 for (var i = 0, f; f = files[i]; i++) {
  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');}
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';}
</script>
</head>
<body>
<form>
<input type="text" id="username" />
<input type="file" id="files"  />
<div id="list"></div>
</form>
</body>
</html>
4

1 に答える 1

8

これは、要素自体がまだロードされていないときに、要素を取得しようとしているためです。JavaScriptを要素の後に下に移動するか、ページの読み込みが完了したときにコールバックとしてコードを実行する必要があります。

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    document.getElementById('username');
    function handleFileSelect(evt) {

        alert('i am called');

        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }
}, false);
于 2012-07-04T03:15:45.583 に答える