Question

我正在尝试创建一个像状态更新的Facebook，我希望用户能够像facebook一样上传图像。我有以下代码，允许用户上传和预览图片，并通过点击＆＃39; X＆＃39;按钮。

HTML表单：

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server" enctype="multipart/form-data">
  <textarea name="status" class="textarea newstatuscontent" placeholder="What are you thinking?"></textarea>
  <input type="file" name="files[]" multiple="multiple" id="file-5" class="inputfile inputfile-4">
  <div id="imgs"></div> // images preview and container
  <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
</form>

将数据插入数据库的Ajax代码：

$(function() {
    $("#submit").click(function() {
        $(this).val("Please wait...");

        var textcontent = $(".newstatuscontent").val();
        /*if(media == ''){*/
            if(textcontent == ''){
                $('.cap_status').html("Status cannot be empty. Please write something.").addClass('cap_status_error').fadeIn(500).delay(3000).fadeOut(500);
                $("#submit").val("Post");
            }else{
        /*}else{*/
                $.ajax({
                    type: "POST",
                    url: "post-status.php",
                    data: {content:textcontent},
                    cache: true,
                    success: function(html){
                        $("#shownewstatus").after(html);
                        $(".newstatuscontent").val('');
                        $("#submit").val("Post");
                    }  
                });
            }
        //}
        return false;
    });
});

jQuery for Images预览：

function del(index) {
    $('div.img_'+index).remove();
    updateFiles();
}

function updateFiles() {
    var fileIndexes = $('#imgs > div').map(function() {
        return $(this).data('index');
    }).get().join(",");
    $('#files_selected').val(fileIndexes);
}

$(document).ready(function() {
    $("#file-5").on('change', function() {
        var fileList = this.files;
        $('#imgs').empty();
        if($('#imgs') != null){
            $('.post-btn').css("margin-top","5px");
        }
        //$('#dimg').empty();
        for (var i = 0; i < fileList.length; i++) {
            var t = window.URL || window.webkitURL;
            var objectUrl = t.createObjectURL(fileList[i]);
            $('#imgs').append('<div data-index="' + i + '" class="img_' + i + '"><span class="img_' + i + '" onclick="del(' + i + ')" style="cursor:pointer; margin-right: 3px;"><b>x</b></span><img class="img_' + i + '" src="' + objectUrl + '" width="160" height="160" style="margin-right: 3px;"></div>');
            j = i + 1;
            if (j % 3 == 0) {
                $('#imgs').append('<br>');
            }
        }
        updateFiles();
    });
});

-status.php后：

<?php
session_start();
include('config/db.php');
$time = date('Y-m-d H:i:s');
$curr_date = date('Y-m-d');
$yest = date("Y-m-d", strtotime("-1 day"));

$status     = (!empty($_POST['content']))?nl2br(trim($_POST['content'])):null;
$status_fix = str_replace(array("\r", "\n"), '', $status);

$post = "INSERT INTO status(sts_status, sts_mem, sts_time)VALUES(:status, :mem, :time)";
$posq = $pdo->prepare($post);
$posq->bindValue(':status', $status_fix);
$posq->bindValue(':mem', $user_id);
$posq->bindValue(':time', $time);
$posq->execute();
$lastid = $pdo->lastInsertId();
?>

我想将图像预览代码与上面的ajax代码结合起来，以便我可以将数据插入数据库。现在我想要什么？

比如说我首先选择了4张图片，如a.jpg，b.jpg，c.jpg，d.jpg。然后我得到了预览。然后说我想删除b.jpg所以我删除了它。现在我在预览a.jpg，c.jpg，d.jpg中只有三张图片。最后，当我点击发布到一些随机名称并将这些图像上传到上传文件夹并将其重命名的名称插入数据库时，我想重命名这三个文件。

注意：我想仅插入和上传预览div <div id="imgs">中的图像，而不是<input type="file">。

请帮帮我们。我尽可能清楚地说明了这一点。上面已经给出了我已编码的内容。从这几天开始就挣扎着这个问题。请帮我解决这个问题。

使用AJAX将多个图像重命名和上传到数据库

0 个答案: