2

アイデアは、ユーザーのマシンから画像を取得し、ユーザーがその画像をWebページに表示できるようにすることです。画像をサーバーに送り返したくありません。

アップロードボタンが存在します。ページのコンテンツを動的に更新するだけです。

これはHTML5ローカルストレージなどで実行できますか？

4

2 に答える 2

3

FileReaderはこれを行うことができます。サンプルコードは次のとおりです。

<input type="file" id="files" name="files[]" multiple />
<img id="image" />

<script>
    function onLoad(evt) {
        /* do sth with evt.target.result - it image in base64 format ("data:image/jpeg;base64,....") */
        localStorage.setItem('image', evt.target.result);
        document.getElementById('image').src = evt.target.result;
    };

    function handleFileUpload(evt) {
        var files = evt.target.files; // FileList object

        for (var i = 0; i < files.length; i++) {
            var f = files[i];

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();
            reader.onload = onLoad;
            reader.readAsDataURL(f);
        }
    }

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

    var image = localStorage.getItem('image');
    if (image !== null) {
        document.getElementById('image').src = image;
    }
</script>
于 2011-12-10T18:38:13.413 に答える
1

ええ、もちろん、最先端のブラウザ（ChromeまたはFirefox）があれば。

使用したいFileReaderとreadAsDataURL()。このチュートリアルの3番目の例を見てください。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

于 2011-12-10T18:14:03.183 に答える