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

Question

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

我用过this一个，效果很好，但是不保存图片？

如有任何建议，我们将不胜感激。

Answer 1

好的，您可以保留该组件，但扩展您需要的内容以涵盖图像上传。我假设您希望它出现在文件输入的 '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) {}
}

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

Autosave Form along with image using jQuery

jquery

autosave