6

ユーザーが画像をローカルストレージにアップロードできるようにしましたが、その画像を取得して、ページの画像要素にそれを入力できるようにしたいと考えています。

<h3>Please upload the image you wish to use.</h3>
<input id="photoin" type="file" accept="image/*;capture=camera"></input>
<a href="#delete_1" data-role="button" onClick="save()">Submit</a>

<script>
    var i = 0; 
    function save(){                
        var input = document.getElementById("photoin").value; 
        var name = "photo_" + i; 
        localStorage.setItem(name, input);      
        $("#QR").src = window.localStorage[name]; 
        i++; 
    }
</script>

「window.localStorage[name]」はそのキーとペアになった値のみを返すため、ストレージ内の画像のURLを正常に取得できるものを探しています。

ありがとう！

4

1 に答える 1

12

実際の画像データを localStorage に保存できます (ただし、注意してください - 制限があります)。

HTML5 rocks チュートリアルを見て、下にスクロールして少し頭の付いたREADING FILES

ここでは、ファイルが読み取られ、出力が img:src タグに入れられます。さらに localStorage に入れることもできます

例: http://jsfiddle.net/8V9w6/ - 画像ファイルを選択すると、サムネイルが表示されますか? 次に、ページをリロードします。サムネイルはそのままにしておく必要があります。(最新の Chrome/Firefox で動作)

于 2012-07-20T16:44:00.707 に答える