Jquery 如何保存上传到本地存储的img?
我正在更努力地开发我的扩展,我很难将img保存在localStorage中并从按钮中删除它 下面是我的HTML的一部分:Jquery 如何保存上传到本地存储的img?,jquery,file-upload,file-io,local-storage,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> 下面是代码的
<a href="#" id="die">DELETE IMG</a>
<input type='file' id="imgInp" />
<div id="canvas">
<img id="uploaded" src="#" alt="your image" />
</div>
下面是代码的示例
任何帮助都将不胜感激。LocalStorage只支持字符串,因此您需要做的是将图像转换为数据URL。您可以将其加载到canvas元素中,然后保存到本地存储中。 请阅读以下内容:-
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();
});