php - 用户将选择的页面上的多个图像，发布到服务器的最佳方式？

Question

我目前正在为加入我网站的新用户制作“欢迎/演练”。

最初，他们会受到他们喜欢的最近/热门上传的欢迎，这将帮助我的网站找到他们想要的图片。但我的问题是让用户选择他们喜欢或不喜欢的最佳方式是什么？目前我有这个。

http://jsfiddle.net/BKjJV/

我希望你能掌握我在这里想要实现的目标，但如果没有，总结一下，

用户单击 (n) 数量的图像来喜欢 -> 点击继续 -> 页面抓取所有被喜欢的图像并将它们发送到添加到我的数据库中的文件。

Answer 1

给定您的代码，最简单的方法是“在下一页按钮上”查看用户选择了哪些图像，然后通过 ajax 将他们的名称发送到 php 页面，该页面将在数据库上检查它以添加它们：

$(document).ready(function(){
    var images = new Array(); //images clicked will be stored here 
    $('#next_page_button').click(function(e){ //button that will send users to the next page
        e.preventDefault(); 
        $('.item').each(function(){ //for each image
            if($(this).find('.clicked').is(":visible")){ //see if the user has clicked on it
               images.push($(this).find('img').attr('src')); //and if so add it to the array
            }
        });
        $.ajax({   //time to send it to the php page
            url: '', //url of it
            type: 'POST',
            data: {images: encodeURIComponent(images.join())}, //lets merge the array and create a query string of the image separated by a comma and encode them to be sent via POST
            success: function(data){
                    //if the database actions went well, user will be send to the next page
            }                               
        });
    });
});

在 PHP 页面上，您将检索，通过explode$_POST['images'] (',' $_POST['images'])拆分变量，然后通过数组循环以检查/将其添加到数据库中foreach

小建议：您应该使用 id 创建“唯一”图像并将其显示在页面上，以便更轻松地在数据库中“检查/添加”它们。使用唯一数字索引而不是文本比较更快，并且提供更高的可靠性。

Answer 2

你可以用一种简单的方式来做，javascript代码是

$('#continue').on('click', 'input', function(e) {
    var selection = [];
    $('.item').filter(function() {
        return $(this).find('.clicked').css('display') == 'block';
    }).each(function() {
        selection.push($(this).find('img').attr('src'));
    });

    alert(JSON.stringify(selection));

    $.post('http://www.example.com', {
        "selection": JSON.stringify(selection)
    }, function(data) {
        console.log(data);
    });
    return false;
});

查看更新的小提琴演示