Question

有人可以建议我一个jquery插件，它会自动将html表单数据保存到LocalStorage，以便在浏览器崩溃，标签关闭或其他灾难后恢复它们吗？

我使用了this一个，它的工作正常，但它不保存图像？

任何建议都将受到高度赞赏。

Answer 1

好的，您可以保留该组件，但可以扩展覆盖图像上传所需的内容。我假设你想要它在文件输入的'change'事件上，所以：

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

编辑这是一个更好的例子 - 然后在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) {}
}

使用jQuery自动保存表单和图像

1 个答案: