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网址]是接收上传图片的网页的网址。

和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);
    });
});

Answer 2

我无法使用php（考虑到我不想使用php）和html表单（方法get和post）......所以我使用了名为“jQuery Storage”的jQuery库

很容易，在页面上我选择你使用的图像：

$.sessionStorage([key],[value]);

所以，就像那样：

$.sessionStorage('chosenImg', document.getElementById("photoImg").src);

在新页面中，要获取值，只需添加代码：

$.sessionStorage('chosenImg');

当然，我必须从网站下载de .js库，并在两个html页面上添加以下行：

<script src="jquery.storage.js"></script>

唯一不方便的是移动设备有点重，但这是我发现的唯一方法......

就是这样！谢谢大家！

dataimage base64 data image

将图像数据传递到另一页

2 个答案: