Question

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

<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>

Answer 1

代码中的问题出在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]);
    }
}

希望有帮助！

多个图像上传，每个图像都有预览

1 个答案: