Question

我们的想法是从用户的机器上拍摄图像，并允许它们在网页中显示图像。我不想将图像发送回服务器。

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

这可以通过HTML5 localstorage或其他任何方式完成吗？

Answer 1

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>

Answer 2

是的，绝对是，为您提供最先进的浏览器（Chrome或Firefox）。

您想使用FileReader和readAsDataURL()。看一下本教程中的第三个例子：

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

是否可以在本地将图像加载到网页中？

2 个答案: