更改图像预览并获取img标记的值

Question

我有下面的代码来显示图像预览。但是，当我选择新的图像或者说，当我更改图像时，就应该删除先前选择的图像预览，并且只有新的图像才会显示在预览中。但这没有发生。目前，如果我选择3个图像，然后预览显示。但是当我选择更多的图像时，预览就会与前面的图像相加。

另外，请告诉我如何才能让<img id="imgs">的值插入到数据库中，而不是从<input type="file" name="files[]" multiple="multiple" id="file-5">获得的值。请帮帮忙。

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"><br />
        <img id="imgs"><br />
        <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    </form>

Jquery：

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

用于将数据插入数据库的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;
    });
});

Answer 1

img元素不是容器。您应该使用div元素，而不是如下所示：

<div id="imgs"></div>

然后，每当用户选择新图像时，都要删除所有图像，只需使用容器jQuery empty ( for循环之前)删除容器div#imgs中包含的所有图像：

$('#imgs').empty();

一个完整的工作实例：

​

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();
        for (var i = 0; i < fileList.length; i++) {
            var t = window.URL || window.webkitURL;
            var objectUrl = t.createObjectURL(fileList[i]);
            $('.removeimg').fadeIn();
            $('#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="150" height="150" style="margin-right: 3px;"></div>');
            j = i + 1;
            if (j % 3 == 0) {
                $('#imgs').append('<br>');
            }
        }
        updateFiles();
    });
});

#imgs > div {
    display:inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"><br />
    <div id="imgs"></div>
    <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    <input type="hidden" name="files_selected" id="files_selected" />
</form>

​

编辑

javascript files属性是只读的，因此要做您想做的事情，您必须有一个隐藏的输入，并使用一串逗号分隔的索引来更新它，这些索引指向所选的files数组。另外，如果您添加了display: inline CSS规则，那么您将在同一行中使用div，并且在代码工作时每3张图像中断一次。请参阅整个工作示例的更新片段代码。

要查看确切的输出输出，请使用以下PHP代码：

<pre><?php
print_r($_POST);
print_r(explode(',', $_POST['files_selected']));
?></pre>

<pre><?php
print_r($_FILES);
?></pre>

输出

Array
(
    [status] => 
    [post] => Post
    [files_selected] => 0,2
)
Array
(
    [0] => 0
    [1] => 2
)
Array
(
    [files] => Array
        (
            [name] => Array
                (
                    [0] => 1c.jpg
                    [1] => 1e.jpg
                    [2] => 2c.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                    [2] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /var/www/clients/client3/web35/tmp/phpzkmzlf
                    [1] => /var/www/clients/client3/web35/tmp/php9HuwoF
                    [2] => /var/www/clients/client3/web35/tmp/phpZiOur5
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 11384
                    [1] => 7348
                    [2] => 12700
                )
        )
)

通过调用$selected = explode(',', $_POST['files_selected']，可以将所有选定的文件索引到数组

Answer 2

您需要在代码中进行一些编辑。它们是: 1.>在<form>标签下，删除<img>标记并添加这个<div id="imgs"></div>标记。

2.>在从第一行开始的onchange函数()中

$(document).ready(function(){
     $("#file-5").on('change',function() {
    var length= $('[id^=image]').length;
     for(var i = 0; i < length; i++){
        var imgTag = document.getElementById("image" + i);
       imgTag .parentNode.removeChild(imgTag );
    }
     var fileList = this.files;
     for(var i = 0; i < fileList.length; i++){
          var t = window.URL || window.webkitURL;
          var objectUrl = t.createObjectURL(fileList[i]);
          $('.removeimg').fadeIn();
          $('#imgs').append('<span id="image'+i+'" class="img_'+i+'" onclick="del('+i+')" style="cursor:pointer; margin-right: 3px;"><b>x</b><img class="img_'+i+'" src="' + objectUrl + '" width="150" height="150" style="margin-right: 3px;"/></span>');
          j = i+1;
          if(j % 3 == 0)
          {
            $('#imgs').append('<br>');
          }
        }
    });
});

我正在添加标签在。span标记将有id，如"image1“、"image2”、.每当在选择中发生任何更改时，就删除旧图像并添加新图像。您可以编辑del()函数，将输入作为span标记的id，每当单击标记时，它应该调用del('image1')，删除包含单击图像的相应span标记。

您应该编辑行：$('#imgs').append(‘