图像选择器不止一个

Question

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

我试过我的代码，它只适用于一个 select 或者，不适用于其他。

<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

首先，您可以使用类而不是 select 元素的 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

图像选择器不止一个

Image selector more than one

javascript

php

upload

jquery

image