[英]How do I display image input results on same page?
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/游戏: http : //thinksocreative.com/brandportraiture/toluna/
How the game works: There are 4 categories, each category has 9 cards.游戏原理:有4个类别,每个类别有9张牌。 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.
一旦用户对所有 4 个类别做出最终的卡片决定,他就会单击“生成结果”按钮,这会将用户带到游戏的最后一部分。 Here is where I'd like to automatically display the 4 final chosen images.
这是我想自动显示 4 个最终选择的图像的地方。 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?
这是否需要 php 提交表单? Or can we stick with javascript?
或者我们可以坚持使用javascript吗?
Thanks!谢谢!
Copy bellow code to a file and import the file at bottom of body tag on your site.将波纹管代码复制到一个文件中,然后在您网站的 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);
}
}
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.
请注意 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/*"/>
With above example img-avatar is id of the img tag and data-target is img-avatar too.在上面的例子中, img-avatar是 img 标签的 id,而 data-target 也是img-avatar 。 I hope this will help you.
我希望这能帮到您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.