從窗體保存圖像到本地存儲並存儲/加載它

我的代碼看起來像這樣;從窗體保存圖像到本地存儲並存儲/加載它

<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

從窗體保存圖像到本地存儲並存儲/加載它

回答

相關問題