javascript - 多个图片上传，每个预览

您好，我目前正在创建一个图片上传页面，您可以在其中按每种要求一个一张地上传图片。目前，它只能使用一个预览。
如何添加另一个与预览图像分开的输入类型的文件？我确实尝试过，但它只是替换了以前的预览。

<form method="post" action="upload.php" enctype="multipart/form-data">

//first one
<input type="file" name="file" id="file" />
<span name = "preview1" id ="preview1"></span>
//second one
<input type="file2" name="file" id="file2" />
<span name = "preview2" id ="preview2"></span>

<input type="submit" name="submit" value="Upload"/>
</form>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function filePreview(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#preview1 + img').remove();
        $('#preview1').after('<img src="'+e.target.result+'" width="450" height="300"/>');
    }
    reader.readAsDataURL(input.files[0]);
    }
  }
    $("#file").change(function () {
   filePreview(this);
});
</script>

最佳答案

代码中的问题在CSS选择器中。

$('#preview1 + img').remove();

您将直接在ID为<img>的元素之后删除相邻的同级preview1元素。

$('#preview1').after(...)

在这里，您将在第一个文件输入（＃preview1）之后直接插入新的<img>元素。

您可以做的是使用函数参数this（它指向正确的文件输入元素，即触发change事件的元素）。

由于您已经在使用jquery，因此可以将方法next和after与函数参数input结合使用。

这是您的filePreview函数重做：

function filePreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $(input).next('img').remove();
            $(input).after('<img src="'+e.target.result+'" width="450" height="300"/>');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

希望能帮助到你 ！

关于javascript - 多个图片上传，每个预览，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53127334/