从窗体保存图像到本地存储并存储/加载它

我的代码看起来像这样;从窗体保存图像到本地存储并存储/加载它

<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来获取网址，并显示在页面

上，但我无法弄清楚它是如何工作的，我也不能发现没有太复杂落实到自己的代码

在这拨弄我已经提供了所有，我有此刻的任何代码示例 http://jsfiddle.net/VXdkC/

我真的希望你们能帮助我，我一直在用这个东西搞乱绕不过去的2天，它开始阻挠我:(

来源

2013-11-15 Redavac

请点击其中一个答案上的接受箭头，或者如果他们没有帮助，给我们评论。 – m59

对不起，我忘了那样做！此外，所有的答案是非常有用的，我明白它是如何工作的，非常感谢！ – Redavac

它相当简单

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/

来源

2013-11-15 00:23:26 Musa

Live demo here (click).

的HTML：

<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); 
}

来源

2013-11-15 00:40:42 m59

以下是我会做：

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; 
});

FIDDLE

来源

2013-11-15 00:41:36 adeneo

从窗体保存图像到本地存储并存储/加载它

回答

相关问题