如何在同一页面上显示图像输入结果？答案

【问题标题】：How do I display image input results on same page?如何在同一页面上显示图像输入结果？
【发布时间】：2018-03-17 09:36:30
【问题描述】：

我正在尝试从我创建的一个小纸牌游戏中显示图像输入结果。

游戏：http://thinksocreative.com/brandportraiture/toluna/

游戏如何运作： 有4个类别，每个类别有9张卡片。用户必须从每个类别中选择一张卡片。首先，所有卡片都被选中，然后用户将每张卡片一张一张地取消选择，直到他剩下一张卡片，作为他对该类别的最终选择。一旦用户对所有 4 个类别做出最终的卡片决定，他点击“生成结果”按钮，将用户带到游戏的最后部分。这是我想自动显示最终选择的 4 张图像的地方。但我不确定获得这些结果的最佳途径是什么

目前我正在使用“购物车”功能——当用户到达该类别的最后一张卡片时，用户必须将鼠标悬停在右上角才能显示粉红色的星星。单击粉红色星号将卡片“添加”到“购物车”，点击“生成结果”按钮即可看到。我不喜欢这个添加到游戏中的步骤，但它确实按我的意愿工作。您可以看到每个类别中只有一张卡片显示在“购物车”部分中

现在，所有卡片都默认为“选中”输入复选框。单击卡片将取消选中该卡片。 如何在结果中显示剩余的选中图像？ 这是否需要 php 提交表单？还是我们可以坚持使用 javascript？

谢谢！

【问题讨论】：

标签： javascript php forms checkbox input

【解决方案1】：

将下面的代码复制到一个文件中，然后在您网站的 body 标签底部导入该文件。

$('.input-file').on('change', function () {
    var files = $(this)[0].files;
    $er = '';
    for (var i = 0; i < files.length; i++) {
        if (convertToMBytes(files[i].size) > 4) {
            $er = '1';
        }

        var fileName = files[i].name;
        var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
        if (ext != "png" && ext != "PNG" && ext != "JPEG" && ext != "jpeg" && ext != "jpg" && ext != "JPG") {
            er = '2';
        }
    }
    if ($er == '') {
        processFiles(files, $('#'+$(this).attr('data-target')));
    }

    return false;
});

function convertToMBytes(number) {
    return (number / 1024) / 1024;
}

var processFiles = function (files, target) {
    if (files && typeof FileReader !== "undefined") {
        readFile(files[0], target);
    }
}


/*****************************
 Read the File Object
 *****************************/
var readFile = function (file, target) {
    if ((/image/i).test(file.type)) {
        var reader = new FileReader();

        reader.onload = function (e) {
            target.attr('src', e.target.result);
            target.show();
        };

        reader.readAsDataURL(file);
    }
}

在您想要显示的输入标签上添加类输入文件。添加标签属性的数据目标，如下所示。请注意 data-target 值是 您要显示结果的 img 标签的 id。

<img id="img-avatar" src="" class="img-circle img-thumbnail thumb-lg" style="width: 120px; height: 120px;"/>
<input type="file" class="input-file" data-input="false" data-target="img-avatar" name="avatar" accept="image/*"/>

在上面的例子中，img-avatar是img标签的id，data-target也是img-avatar。我希望这会对你有所帮助。

【讨论】：