javascript - 将图像数据传递到另一个页面

Question

我正在尝试访问移动设备上的相机和相册并获取所选图像。我用下面的代码做到了这一点。我的问题是，它生成图像数据，我必须将其传输到另一个页面，但由于生成的字符串的大小，我无法使用 URL 参数。它向我显示错误:[404] Request-URI Too long。如何将信息传递到其他页面？

代码如下:http://jsfiddle.net/8u426/

JS:

<script>

    oFReader = new FileReader();

    oFReader.onload = function (oFREvent) {     
        document.getElementById("fotoImg").src = oFREvent.target.result;
        document.getElementById("fotoImg").style.visibility = "visible"; 
        var screenHeight = screen.availHeight;
        screenHeight = screenHeight - 220;
        document.getElementById("fotoImg").style.height = screenHeight;
        document.getElementById("stringImg").innerText = "Data Image: " + oFREvent.target.result;
    };

    $(function() {
        $("input:file").change(function (){
            var input = document.querySelector('input[type=file]');
            var oFile = input.files[0];
            oFReader.readAsDataURL(oFile);  
            });
    });

</script>

更新:

问题是:如果我尝试打开一个新页面，将数据图像字符串作为 URL 中的参数传递(带有“？”)。新页面将显示我提到的 404 错误，因为字符串太长。

Answer 1

尝试将您的表单更改为

<form id="form1" method="POST" action="[Page2 URL]">
    <input id="filePic" type="file" name="image" accept="image/*" capture />    
</form>

其中[Page2 URL]是接收上传图像的页面的URL。

和 JavaScript

oFReader = new FileReader();

oFReader.onload = function (oFREvent) {     
    var screenHeight = screen.availHeight;
    screenHeight = screenHeight - 220;

    var img = $('#fotoImg');
    img.attr('src', oFREvent.target.result);

    img.css( { height : screenHeight, visibility: 'visible' });
    $("#stringImg").text( "Data Image: " + oFREvent.target.result);
    $('#form1').submit();
};

$(function() {
    $("input:file").change(function (){
        var oFile = this.files[0];
        oFReader.readAsDataURL(oFile);
    });
});