javascript - 图像选择器不止一个

Question

我有一个页面，该页面有两个图片选择器。当我选择图片文件时，我对其中一个进行了编码以显示图片。但我想单独使用它们。我尝试将其作为附加代码。你能帮我把它们分开吗？另外，如何使用 PHP、Javascript 或 jQuery 创建单独的清除按钮？

我试过我的代码，它只对一个选择器起作用，对其他选择器不起作用。

<form id="form1">
    <input type="file" id="image-1-selector">
    <img src="#" id="first-image">
    <button type="reset" onclick="clearFile(event)">Clear</button><br /><br />

    <input type="file" id="image-2-selector">
    <img src="#" id="second-image">
    <button type="reset" onclick="clearFile(event)">Clear </button>
</form>

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#first-image').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("#image-1-selector").change(function() {
    readURL(this);
});

var clearFile = function(event) {
    var output = document.getElementById('first-image');
    output.src = '';
};

Answer 1

首先，您可以使用类而不是 id 来选择元素，从而使您的代码变干。从那里您可以使用 DOM 遍历方法(在本例中为 next() 和 prev())来查找需要修改的元素。试试这个:

<form id="form1">
    <input type="file" class="image-selector">
    <img src="#" class="preview">
    <button type="reset" class="clear">Clear </button><br /><br />

    <input type="file" class="image-selector">
    <img src="#" class="preview">
    <button type="reset" class="clear">Clear </button>
</form>

$(".image-selector").change(function() {
    var el = this;
    if (el.files && el.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $(el).next('.preview').prop('src', e.target.result);
        }
        reader.readAsDataURL(el.files[0]);
    }
});

$('.clear').click(function(event) {
    $(this).prev('.preview').prop('src', '');
});

Updated fiddle