Question

我需要一段代码来获取图像的基本64代码，当我选择文件或上传并将其存储在cookiei中时想要将此图像传递到弹出窗口而不将其上传到服务器上

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    //var allcookies = document.cookie;
    //alert("all cookie"+allcookies);
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}


function mh_realtime_preview(input,input_id) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.cookie= "img1_code = " + e.target.result;
            document.cookie="test=value";
        }

        reader.readAsDataURL(input.files[0]);
    }
}
jQuery(document).ready(function(e) {
    $("#imgInp").change(function(){
        mh_realtime_preview(this,'#img_id');
        setTimeout( function() {alert(readCookie("img1_code"));} ,1000);
    }); 
});


</script>
</head>
<body>
<input type="file" id="imgInp"/>

</body>
</html>

Answer 1

我对coockies一无所知。

但是对于base64，javascript中有一个inbuild函数

1）btoa（）： - 编码

http://www.w3schools.com/jsref/met_win_btoa.asp

2）atob（）： - 解码

http://www.w3schools.com/jsref/met_win_atob.asp

Answer 2

Cookie不用于存储图像，声音等。用于存储Cookie的空间通常有限，用户可能会在每次会话后清除Cookie。

除此之外，正如 spender 已经指出的那样，cookie数据总是在每次请求时传递给服务器。

如果您只想将base64图像从窗口传递给其弹出子窗口，则应该使用JS var保留base64字符串，然后在弹出窗口中使用数据动态创建img元素。

Answer 3

我会将数据存储在javascript变量中，并在需要的弹出窗口中使用该变量。

e.g。

// Main window
window.base64Data = data;
window.open("popup.html");

// popup.html
var base64Data = window.opener.base64Data;

Answer 4

您可以使用sessionStorage存储数据，而不是Cookie。

设置数据的代码，

sessionStorage.setItem('item-name','item-data');

获取数据的代码，

sessionStorage.getItem('item-name');

注意：这是基于HTML 5的存储对象，因此某些浏览器可能不支持它。

如果您想永久保存，也可以使用

localStorage代替sessionStorage。

如何获得base 64代码并将其存储在cookie中

4 个答案: