How do I display image input results on same page?

Question

I am trying to figure out to display image input results from a little card game I created.

The game: http://thinksocreative.com/brandportraiture/toluna/

How the game works: There are 4 categories, each category has 9 cards. The user must select one card from each category. At first, all the cards are selected, then the user deselects each card one by one until he has one remaining card, which serves as his final pick for that category. Once the user makes his final card decision for all 4 categories, he clicks the “generate results” button, which takes the user to the last part of the game. Here is where I'd like to automatically display the 4 final chosen images. But I'm not sure what is the best route to have those results

Currently I'm using a “shopping cart” feature—when the user lands on his final card for that category, user must hover mouse over the upper right hand corner for a pink star to be displayed. Clicking the pink star “adds” the card to the “cart” which can be seen upon clinking the “generate results” button. I don't like this added step to the game, but it does work how I want it to. You can see only one card from each category is displayed in the “cart” section

Right now, all the cards are defaulted to "checked" input checkboxes. Clicking a card unchecks the card. How do I display the one remaining checked image in the results? Does this call for a php submit form thing? Or can we stick with javascript?

Thanks!

Answer 1

Copy bellow code to a file and import the file at bottom of body tag on your site.

$('.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);
    }
}

Add the class input-file on your input tags what you want to show. Add data-target of the tag's attribute like bellow. Please note data-target value is id of the img tag you want to show results.

<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/*"/>

With above example img-avatar is id of the img tag and data-target is img-avatar too. I hope this will help you.