1

これらのコードスニペットhttp://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-inputを見つけました。これらがどのように機能するかを確認したいのですが、私の場合はコードが機能しません。 。多分私はその統合で何か間違ったことをしますか？私はJSに本当に慣れていないので、いくつかの統合スニペットを共有してください:)

これが私のおそらく間違った統合です...

<html>

  <head>
<script language="javascript" type="text/javascript">

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}


  function handleFileSelect(evt) {
    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>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</head>

<body>
<div>
<input type="file" id="files" name="files[]" multiple />
  <output id="list"></output>
</div>
<body>


</html>

PS>マイインターネットブラウザ：FF 5.0

すべての有用なコメントをいただければ幸いです:)

4

3 に答える 3

3

あなたの例には最初にいくつかの差し迫った問題があります、あなたのクローズ<body>は実際には別のオープン<body>です！それでも、問題は発生しません。

2番目のエラーは、次の行です。

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

これは、いわば、ウィンドウの読み込みが完了するまで要素が存在しないため、オープンid=filesにすることはできません。そのため、関数でそれをラップし、ウィンドウの読み込み時に呼び出す必要があります（またはより良い方法でdocument.readyjQueryなどを使用している場合）。このような、

window.onload = function() {
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
};

残念ながら、これらの両方の後でもエラーが発生しますが、f.lastModifiedDate未定義です。を暗示することは、オブジェクトlastModifiedDateのプロパティではありません。Fileこれがリンクしたスニペットのエラーなのか、それとも他の何かなのかはわかりません。私は見つけようとしています。

アップデート

Ok。これがFirefoxの問題かどうかを知りたいとおっしゃっていたので、Chromeでテストしたところ、問題なく動作しました。私の結論lastModifiedDateは、オブジェクトの属性はFileFirefox（5）では実装されていませんが、Chromeでは実装されているということです。（これは、Fileオブジェクトの使用可能な属性を反復処理することで確認できます）。

これが説明していないのは、投稿したリンクの例を試してみるとFirefoxで機能するのに、例をコピーして貼り付けることができない理由です。これが考えられる唯一の理由は、スニペット内のコードが、ページで実際に使用されているコードとまったく同じではないということです。fileModifiedDate属性が実際に存在するかどうかを確認する必要があります。案の定、問題のページのソースを見ると、これの代わりに、

f.lastModifiedDate.toLocaleDateString(),

彼らはこれを使用しているようです、

f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

したがって、その行を置き換えると問題が解決するはずです。これが動作しているjsfiddleです（少なくともChromeとFirefox 5では）。

于 2011-07-04T01:58:28.537 に答える
1

まず、コードの次の行を実行することはできません。

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

HEADタグのコードから。ドキュメントはまだロードされていないため、「files」オブジェクトは存在しないため、コード行はせいぜい常に失敗します。

ドキュメントの読み込みが完了するのを待ってから実行する必要があります。ライブラリ（jQueryやYUIなど）を使用していない場合は、ページのonloadメソッドに接続して、そこからコードを実行できます。

于 2011-07-04T02:01:41.183 に答える
0

だから、私はコードを次のように変更しました

<html>

    <head>

<script>

function handleFileSelect(evt) {
    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>', 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>';
}

window.onload = function() {

    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
};
</script>

    </head>

    <body>
        <div>
            <input type="file" id="files" name="files[]" multiple />

            <output id="list"></output>
        </div>
    </body>
</html>

そしてそれは私のFF5.0で動作しました:)

@ tjm、本当に良いコードサンプルをありがとう

于 2011-07-04T16:13:38.797 に答える