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>

然后，只要用户选择新图像，就可以删除所有图像，只需在容器empty上使用jQuery 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属性是readonly，所以为了做你想做的事，你必须有一个隐藏的输入并用一串逗号分隔的索引更新它，指向所选的files PHP中的数组。此外，如果您添加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.＆GT;在<form>代码下移除<img>代码并添加此<div id="imgs"></div>代码。

2＆GT;在第一行的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'）。追加（”

更改图片预览并获取img标记

2 个答案: