Автосохранение формы вместе с изображением с помощью jQuery

хорошо, вы можете сохранить этот компонент, но расширить то, что вам нужно, чтобы покрыть загрузку изображения. Я предполагаю, что вы хотите, чтобы это произошло в событии "change" ввода файла, поэтому:

<input type="file" id="myimage" name="myimage" />

EDIT вот лучший пример - затем в JS:

$(document).ready(function() {
    $("#myimage").on('change', function() {
        getImage(this);
    });
});

function getImage(e) {
    var reader = new FileReader();
    reader.onload = function(event) {

    var img = new Image();
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var dataURL = canvas.toDataURL("image/png");
        console.log(dataURL);
        var base64Data = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

        localStorage.setItem("myImageData", base64Data);

        setImage(); //set the image from the base64 string.
      }
      img.src = event.target.result;
    }
    reader.readAsDataURL(e.files[0]);
}

Затем, чтобы прочитать и установить изображение обратно на страницу:

<img id="myImageElement" src="" />

function setImage() {
    try {
    var imgObj = $("#myimageElement");

    var base64Data = localStorage.getItem("myImageData");
    imgObj.src = "data:image/png;base64," + base64Data;
    }
    catch(e) {}
}