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

I am trying to create a facebook like status update where I want a user to be able to upload images exactly like facebook does. I have the following codes which allows a user to upload and preview images and remove them by clicking on a 'X' button.

HTML Form:

<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 code to insert data to the database:

$(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 preview:

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();
    });
});

post-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("", "
"), '', $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();
?>

I want to combine the Image preview code with the ajax code above so that I can insert the data to the database. Now what I want?

Say for example I first selected 4 images like a.jpg, b.jpg, c.jpg, d.jpg. Then I got their preview. Then say I thought to remove b.jpg so I removed it. Now I have only the three images in preview a.jpg, c.jpg, d.jpg. Now finally, I want to rename these three files when I click on post to some random names and upload these images to the upload folder and insert their renamed names to the database.

NOTE: I want to insert and upload only those images that are in the preview div <div id="imgs"> and not from <input type="file">.

Please help me guys. I made it as much clear as possible. What I have already coded is already given above. Struggling with this problem from quite a few days. Please help me tackle this problem.