如何保存上传到本地存储的图像?

时间:2014-06-12 10:56:33

标签: jquery file-upload file-io local-storage

我正在努力扩展我的扩展程序,我很难将img保存在localStorage中并将其从按钮中删除。

此处是 HTML

的一部分
<a href="#" id="die">DELETE IMG</a>
<input type='file' id="imgInp" />
<div id="canvas">
    <img id="uploaded" src="#" alt="your image" />
</div>
我尝试编辑的

脚本

function readURL() {

     $('#uploaded').attr('src', '').hide();
        if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) {
            $('#uploaded').attr('src', e.target.result) 
            localStorage.setItem('img', e.target.result);
        });
        reader.readAsDataURL(this.files[0]);
    }
}

$('#uploaded').load(function(e) {       
    $(this).show();
}).hide();

$("#imgInp").change(readURL);

$('#die').click(function() {
    localStorage.clear();
    window.location.reload();
});

以下是代码

jsfiddle

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

LocalStorage仅支持字符串,因此您需要做的是将图像转换为数据URL。您可以通过将其加载到canvas元素然后保存在本地存储中来完成。 阅读以下内容: -

How to save an image to localStorage and display it on the next page?

https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/