0

サーバーに送信 (アップロード) する前に、ハード ドライブから画像を選択して表示しようとしています。このウェブサイトで小さなコードを見つけました。コピーして貼り付けましたが、機能しません (デモ ページにあります)。画像を選択すると、[ファイルを選択] ボタンの右側にその名前が表示されますが、画像もサイズも表示されません。毛を抜いています。

コード全体:

<!DOCTYPE html>  <!-- Using margin:auto will not work in IE8, unless a !DOCTYPE is declared. -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="design3.css" rel="stylesheet" type="text/css"/>

    <script src="jquery-1.8.3.min.js"></script>

<script language="JavaScript">

// Handle file while select a new file
$('#file').change(function () {
    $('#img_size').val((this.files[0].size) / 1000000);
    handleFiles(this.files);
});


// handle files
function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
            continue;
        }
        var img = document.getElementById('fake_img');
       /* img.src = file;
        img.onload = function () {
        }; */
        var reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
}



function drawAd() 
{
    window.open('http://www.google.com');
}

</script>

</head>
<body> 

    <input type="file" id="file"/>
    <input type="text" id="img_size" />
    <img src="" id="fake_img" />

    <button type="button" onclick="drawAd()">Refresh</button>


</body>
</html>

IE と Chrome でテスト済み。

4

1 に答える 1

0

コードの残りの部分 (フォームの HTML) を見ずに確実に知ることは困難ですが、おそらく、ブラウザーが HTML を見て解析する前にコードが実行されている可能性があります。

コードを jQuery の「準備完了」ハンドラーとしてラップします。

$(function() {
  // your code here
});

そして、それが役立つかどうかを確認してください。この行：

$('#file').change(function () {

ファイル入力の「変更」イベントのイベント ハンドラーを設定します。それが実行されたときに、ブラウザが「id」として「file」を認識している要素がない場合、エラーは発生しませんが、何も起こりません。ブラウザーがドキュメント全体を確認するまでそのコードを遅らせることにより (これは、jQuery の「準備完了」ラッパーが行うことです)、「ファイル」入力が見つかるようにします。

于 2012-12-30T17:45:31.090 に答える