0

サイト内のすべてを試し、テストし、指示に従いましたが、役に立たなかったのですが、どこで失敗しましたか？

サイト：http ：//www.xul.fr/en/html5/filereader.php

私がやろうとしているのは、画像をアップロードして、JavaScriptを介して、またはサーバーを使用せずに一時的にWebページ内に保存することです。コードをコンパイルしてみました：

<!DOCTYPE HTML>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) 
  document.write("<b>File API supported.</b> <br />");
else
  document.write('<i>File API not supported by this browser.</i> <br />');
</script>

<form name="form1" method="post" action>
    <input type="file" id="getimage">
</form>

<script language="javascript" >

function imageHandler(e2) 
{ 
    var store = document.getElementById('imgstore');
    store.innerHTML='<img src="' + e2.target.result +'">';
}
function loadimage(e1)
{
    var filename = e1.target.files[0]; 
    var fr = new FileReader();
    fr.onload = imageHandler;  
    fr.readAsDataURL(filename); 
}
window.onload=function()
{
    var x = document.getElementById("filebrowsed");
    x.addEventListener('change', readfile, false);
    var y = document.getElementById("getimage");
    y.addEventListener('change', loadimage, false);
}

</script>

<fieldset><legend>Your image here</legend>
    <div  id="imgstore">
    </div>
</fieldset>

</html>

私は彼がいくつかの埋め込みスクリプトを持っていると思いました、または私は彼が言ったことを実際にフォローしたかどうかわかりませんか？または何かアイデア？

OT：以前のあいまいな投稿、気分が悪い、気分が悪いことをお詫びしますが、私はこの仕事に感謝する必要があります。

4

1 に答える 1

3

まず、ページに正しいHTML要素が表示されません。また、xのイベントリスナーに接続した「readfile」関数も表示されません。

第二に、あなたは画像をアップロードしているのではなく、それを読んでいます。そして、あなたは画像を保存しているのではなく、それを表示しているのです。

今では邪魔になりません。

ファイルリーダーを使用するには、input type="file"が必要です。正しくコピーしたら、「変更」イベントをリッスンするイベントリスナーをその要素に追加する必要があります。イベントリスナーに接続された関数の内部で、FileReaderオブジェクトを作成し、イベントからのデータをreadAsDataURLする必要があります。チェック、私たちもそれを手に入れました。これで、Readerオブジェクトへの読み込みが完了した関数をフックできます。この関数内で、新しいImage（）を作成し、そのsrcプロパティをFileReadersのロードの結果に割り当てます。画像を表示するには、画像のloadイベントもリッスンする必要があります。ここでは、必要な場所に画像をページに追加するだけです。

したがって、コードは次のようになります。

var imageLoader = document.getElementById('getimage');
imageLoader.addEventListener('change', handleImage, false);


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            document.body.appendChild(img);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}
于 2013-01-05T04:57:36.170 に答える