2

这个想法是从用户的机器中获取图像并允许他们在网页中显示图像。我不想将图像发送回服务器。

将存在一个上传按钮。它应该只是动态更新页面内容。

这可以用 HTML5 localstorage 或任何东西来完成吗？

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()。看一下本教程中的第三个示例：

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

于 2011-12-10T18:14:03.183 回答