将图像数据传递到另一个页面答案

【问题标题】：Passing image data to another page将图像数据传递到另一个页面
【发布时间】：2018-04-10 01:32:31
【问题描述】：

我正在尝试访问移动设备上的相机和相册并获取所选图像。我用下面的代码做到了。我的问题是，它生成图像数据，我必须将其传输到另一个页面，但是由于生成的字符串的大小，我不能使用 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 错误，因为字符串太长。

【问题讨论】：

使用 POST 而不是 GET ...
@CBroe，具体在哪里？谢谢
好吧，您正在尝试将数据传递到服务器，并说现在您遇到了使用 GET 的限制……
代码中提供 404 的部分在哪里？
@MilinduSanojKumarage，如果我将该数据图像字符串作为参数（带有“？”）添加到新页面 URL 并打开页面，新页面将显示该错误。

标签： javascript jquery html image mobile

【解决方案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);
    });
});

【讨论】：

但这也不会创建 URL 字符？如何从新页面访问值？好吧，我试过那样做，但我无法工作......谢谢！
请发布示例代码以更好地理解问题..html/js
我发布了答案：jsfiddle.net/8u426。我正在尝试将数据图像字符串传递到另一个页面，但由于字符串的大小，我无法使用该方法获取表单...我仍在尝试使用 post 方法，但没有成功然而……

【解决方案2】：

我无法使用 php（考虑到我不想使用 php）和 html 表单（方法获取和发布）......所以我使用了名为“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

【讨论】：