イメージ入力結果を同じページに表示するにはどうすればよいですか？

Question

私は、作成した小さなカードゲームからの画像入力結果を表示するようにしています。

ゲーム：ゲームの仕組みhttp://thinksocreative.com/brandportraiture/toluna/

： 4つのカテゴリがありますが、各カテゴリには9枚のカードを持っています。ユーザは各カテゴリからカードを1つ選択する必要があります。最初にすべてのカードが選択され、ユーザは残りのカードが1つ残るまで各カードを1つずつ選択解除します。これはそのカテゴリの最終的な選択です。ユーザが4つのカテゴリすべてについて最終的なカード決定を下すと、ユーザはゲームの最後の部分に移動する「結果を生成する」ボタンをクリックする。ここでは、最終的に選択された4つの画像を自動的に表示したいと思っています。しかし、私はそれらの結果を得る最良のルートが何であるか分かりません

現在、私は "ショッピングカート"機能を使用しています - ユーザがそのカテゴリの最終的なカードに着いたら、ピンクの星が表示される右隅に表示されます。ピンクの星をクリックすると、カードを「カートに」追加します。このカードは、「結果の生成」ボタンをクリックすると表示されます。私はゲームに加えられたこのステップが気に入らないが、それは私がそれをしたい方法で動作する。 "カート"セクションに各カテゴリのカードが1つしか表示されないことがわかります

現在、すべてのカードの入力チェックボックスはデフォルトでチェックされています。カードをクリックするとカードがチェックされなくなります。 残りのチェック済み画像を結果に表示するにはどうすればよいですか？これは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-アバターは、imgタグ及びデータターゲットのIDがあまりにIMG-アバターです。 これがあなたを助けてくれることを願っています。