Question

我试图通过我创建的小纸牌游戏来显示图像输入结果。

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

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

目前我正在使用“购物车”功能 - 当用户登陆该类别的最终卡片时，用户必须将鼠标悬停在右上角，才能显示粉红色的星标。单击粉红色的星形“将”卡“添加”到“购物车”，这可以在“生成结果”按钮无效时看到。我不喜欢这个增加的游戏步骤，但它确实有用，我想要它。您只能看到每个类别中的一张卡片显示在“购物车”部分

中

现在，所有卡都默认为＆＃34;已检查＆＃34;输入复选框。单击一张卡取消选中该卡。 如何在结果中显示剩余的已检查图像？这是否需要php提交表格？或者我们可以坚持使用javascript吗？

谢谢！

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

在输入标记上添加要输出的类输入文件。添加标记属性的数据目标，如下图。请注意，数据目标值是您要显示结果的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 。我希望这会对你有所帮助。

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

1 个答案: