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

我有以下显示图像预览的代码。但是，当我选择新图像或说当我更改图像时，则在更改之前选择的图像预览时应删除，并且只有新图像应显示在预览中。但这并没有发生。当前，如果我选择3个图像，则会显示预览。但是，当我选择更多图像时，预览将与以前的图像相加

另外，请告诉我如何获取要插入到数据库中的值，而不是从中获取的值。请帮忙

HTML:

img元素不是容器。您应该像这样使用div元素：

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

一个完整的工作示例：

函数delindex{ $'div.img_'+index.remove； 更新文件； } 函数更新文件{ var fileindex=$'imgs>div'.mapfunction{ 返回$this.data'index'； }.得到.加入，； $'files\u selected'.valfileindex； } $document.readyfunction{ $file-5。关于“更改”，函数{ var fileList=this.files； $'imgs'。为空； 对于变量i=0；idiv{ 显示：内联； }

---

您需要在代码中进行一些编辑。这些是： 1.>在标签下移除标签并添加此标签

2.>在第一行的onchange函数中

我正在将标签添加到。 span标记将具有类似于image1、image2等的id，。。。 无论何时选择中发生任何更改，都会删除旧图像并添加新图像。 您可以编辑del函数，将输入作为span标记的id，并且每当您单击标记时，它都应该调用del'image1'删除包含单击图像的相应span标记

您应该编辑该行：

---

$'imgs'.append'您需要重新设置文件输入，但请参阅此提琴的HTML部分以了解问题。。如何从中获取名称并将其作为逗号分隔的值插入数据库？我想，如果选择了文件，那么？由于您将索引放入$selected数组中，现在可以使用这些索引访问类似以下文件的文件$\u files['files']['name'][$selected[0]]；将返回第一个选定图像的文件名。你想让我更新我的答案吗？是的当然。。如果这对我来说很容易的话，我会很高兴的：请看这把小提琴的HTML部分，以了解问题。。上面已经给出了完整的代码。。。没有比我用的更多的了。。

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

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

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

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

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