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

-2

我想弄清楚从我创建的一个小卡片游戏显示图像输入结果。如何在同一页面上显示图像输入结果？

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

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

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

现在，所有卡片默认为“已检查”输入复选框。点击卡片取消选中卡片。 如何在结果中显示剩余的一张选中图像？这是否需要一个PHP提交表单的东西？或者我们可以坚持使用JavaScript？

谢谢！

来源

2017-10-05 olivejuice

将波纹管代码复制到文件中，并将该文件导入到站点上的标签底部。

$('.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-化身太。我希望这会帮助你。

来源

2017-10-05 17:28:37

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

回答

相关问题