2011-07-04 10 views
1

これらのコードスニペットが見つかってhttp://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-input、どのように動作するのか見たいのですが、私の場合はコードが機能しません。たぶん私はその統合に何か悪いことをしますか?私はJSで本当に新しいですので、いくつかの統合スニペットを共有してください:)ここJS HTML 5 - サンプルコードを統合できません - ヘルプ

は私多分間違っ統合です...

<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

すべての有益なコメントがありますありがとう:)

+1

ためそんなにありがとう、私は

<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> 

ように、コードを変更しているし、それは私のFF 5.0 :)

@tjmで働いていましたあなたの場合、仕事はできますか?あなたのケースは何ですか?そのスニペットをあなたのケースにどのように統合しようとしましたか?リンクしたスニペットが動作すると仮定しましょう。だから、私たちが見なければならないのは、あなたがそれをどのように使ってみたかの例です。 – tjm

+0

私はファイルの入力を見ることができますが、ファイルを選択できますが、例のように以下に追加されているのがわかりません: – user592704

+0

私の質問を編集しました... – user592704

答えて

3

あなたの例ですぐにいくつかの問題がありますが、あなたの閉じる<body>は実際に別のオープン<body>です!それはあなたの問題を引き起こすことはありません。

第2のエラー、ウィンドウの読み込みが完了するまでid=files持つ要素が存在しないため、これは、いわば、オープンにアウトすることができない

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

、ラインでありますしたがって、関数内でラップしてウィンドウロード(または、より良い、jQueryなどを使用している場合はdocument.ready)で呼び出す必要があります。このように、

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

は残念ながら、これらの両方の後、私はまだエラーを取得し、f.lastModifiedDateは未定義です。 lastModifiedDateは、Fileオブジェクトの所有物ではありません。これがリンクされたスニペットのエラーであるかどうかはわかりません。私は見つけようとしている。

更新

[OK]をクリックします。まあ、これがFirefoxに問題があるかどうかを知りたいと言っていたので、Chromeに行ってテストしたところ、うまくいきました。私の結論は、FileオブジェクトのlastModifiedDate属性はFirefox(5)では実装されていませんが、Chromeにあります。 (これは、Fileオブジェクトの利用可能な属性を反復することで確認できます)。

あなたが投稿したリンクの例をFirefoxで動作させようとしても、例をコピー&ペーストするのはなぜですか?これが可能な唯一の理由は、スニペットのコードが実際にページで使用されているコードとまったく同じではないことです。 fileModifiedDate属性が実際に存在するかどうかのチェックが必要です。案の定、問題のページのソースを見て、あなたは

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

だからその行を交換しても問題が解決しなければならない、彼らがこれを使用しているようだ

f.lastModifiedDate.toLocaleDateString(), 

、これに代えてそれを見ることができます。 Here's a jsfiddle with it working(ChromeとFirefox 5以上) HEADタグ内のコードから

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

+0

私はwindow.onload = function(){ 文書しかし、それは動作しません:( – user592704

+0

私は多分これがすべてのFF 5.0であることを知る必要があるので、実行中のコードスヌペットを表示してください。 – user592704

+0

@user私は答えを更新しました。これは解決したと思います。 – tjm

1

まず第一に、あなたは、このコード行を実行することはできません。ドキュメントがまだロードされていないので、 'files'オブジェクトが存在しないので、コード行は、せいぜい失敗することになります。

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

+0

私は要素を置き換えようとしましたが、それは助けになりませんでした:(FF 5.0はFile APIをサポートしていますか? – user592704

0

ので、「doesnの本当に良いコードサンプル

関連する問題