如何在同一頁面上顯示圖像輸入結果？

Question

我想弄清楚如何顯示我創建的一個小紙牌游戲的圖像輸入結果。

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

游戲原理：有4個類別，每個類別有9張牌。 用戶必須從每個類別中選擇一張卡片。 首先選擇所有卡片，然后用戶一張一張地取消選擇每張卡片，直到他剩下一張卡片，作為他對該類別的最終選擇。 一旦用戶對所有 4 個類別做出最終的卡片決定，他就會單擊“生成結果”按鈕，這會將用戶帶到游戲的最后一部分。 這是我想自動顯示 4 個最終選擇的圖像的地方。 但我不確定獲得這些結果的最佳途徑是什么

目前我正在使用“購物車”功能——當用戶在他的最后一張卡片上登陸該類別時，用戶必須將鼠標懸停在右上角才能顯示粉紅色的星星。 點擊粉紅色的星星將卡片“添加”到“購物車”中，點擊“生成結果”按鈕即可看到。 我不喜歡這個在游戲中添加的步驟，但它確實按照我想要的方式工作。 您可以看到“購物車”部分中只顯示每個類別的一張卡片

現在，所有卡片都默認為“選中”輸入復選框。 單擊卡片會取消選中該卡片。 如何在結果中顯示剩余的一張檢查圖像？ 這是否需要 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);
    }
}

在您的輸入標簽上添加您想要顯示的類輸入文件。 添加標簽屬性的數據目標，如下所示。 請注意 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 。 我希望這能幫到您。