图像选择器不止一个

Question

I have a page and the page has two picture selectors. I coded one of them for showing a picture when I select a picture file. But I want use them as separately. I tried it as attached code. Could you please help me how can I do as separately them? Also how can I create separately clear buttons with PHP, Javascript or jQuery?

I tried as my code and it's working just for one selector, not for other.

<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

Firstly you can DRY up your code by using classes instead of ids to select the elements. From there you can use DOM traversal methods (in this case next() and prev() ) to find the required elements to modify. Try this:

<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