将图像从表单保存到本地存储并存储/加载它

saving image to localstorage from form and storing/loading it

本文关键字：存储 加载 图像 表单 保存      更新时间：2023-09-26

我的代码看起来像这样;

<form>
<input type="text" />
<input type="file">
</form>
<div id="notes"></div>
我让

文本变量工作，但是，我无法让这个愚蠢的图像工作，我已经查看了大量教程，但我根本无法做到这一点

我知道我必须做点什么 

(document.getElementById("file").files)[0] != null) {
var pic = (document.getElementById("file").files)[0];
var imgUrl;
var reader = new FileReader();  
reader.onload = function(e) {
var imgURL = reader.result;
saveDataToLocalStorage(imgURL);
reader.readAsDataURL(pic);

，然后使用 JSON.parse 取回 URL 并将其显示在页面上

但是我无法弄清楚它是如何工作的，也找不到任何不太复杂的示例来实现它到我自己的代码中

在这个小提琴中，我提供了目前拥有的所有代码http://jsfiddle.net/VXdkC/

我

真的希望你们能帮助我，过去两天我一直在搞这件事，它开始让我感到沮丧:(

这是我的做法：

var notes = localStorage.getItem('notes'),
    arr   = [];
if (notes) {
    arr = JSON.parse(notes);
    $.each(arr, function(k,v) {
        console.log(v)
        var h1  = $('<h1 />', {text: v.title});
        var p   = $('<p />', {text: v.msg});
        var img = $('<img />', {src: v.image});
        $('#notes').append(h1, p, img);
    });
}
$('#clear').click(function () {
    if (confirm('This will clear all notes, are you sure?')) {
        window.localStorage.setItem('notes','');
        location.reload();
    }
    return false;
});
$('#addNote').click(function () {
    var Title = $('#title').val();
    var Message = $('#message').val();
    var file = $('#file').prop('files')[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var b64 = e.target.result;
        var note = {
            image : b64,
            title : Title,
            msg   : Message
        }
        arr.push(note);
        localStorage.setItem('notes', JSON.stringify( arr ));
        $('#notes').prepend("<div class='entry'><h1>" + Title + "</h1></p>" + "<p>" + Message + "<img src=" + b64 + " /></p> </div>");
    }
    return false;
});

小提琴

它非常简单

var pic = document.getElementById("file").files[0];
var imgUrl;
var reader = new FileReader();  
reader.onload = function(e) {
  var imgURL = reader.result;
  $('#notes').prepend("<div class='entry'><h1>" + Title + "</h1></p>" + "<p>" + Message + "<img src=" + imgURL + "></p> </div>");
  var notes = $('#notes').html();
  localStorage.setItem('notes', notes);
  saveDataToLocalStorage(imgURL);
}
reader.readAsDataURL(pic);

http://jsfiddle.net/VXdkC/2/

现场演示在这里（点击）。

该网页：

<input id="file" type="file">

JS：

var fileInput = document.getElementById('file');
fileInput.addEventListener('change', function(e) {
  var reader = new FileReader(); //create reader
  reader.onload = function() { //attach onload
    //do something with the result
    console.log(reader.result);
    localStorage.img = reader.result; //saved to localStorage
    createImg(localStorage.img); //retrieved from localStorage
  };
  var file = e.target.files[0];
  reader.readAsDataURL(file); //trigger onload function
});
function createImg(dataUri) {
  var img = document.createElement('img');
  img.src = dataUri;
  document.body.appendChild(img);
}
相关文章：