Question

我无法让预览图像显示在多个文件输入字段中。

我在这里看过很多关于它的帖子，尝试了一些不同的东西，但我似乎无法理解它。

我已将我的代码添加到jsfiddle（http://jsfiddle.net/5boja3mL/1/），因此可以看到它正常工作。

HTML

<div class="upload_main">
<div class="upload_label">
    <label>Main Photo</label>
</div>
<div class="upload_action">
    <input type="file" name="files[]" id="control" class="upload_one" style="display: none;" />
    <input type="button" value="Browse..." onclick="document.getElementById('control').click();" />
</div>
<div class="upload_placehold">
    <img id="blah" src="http://placehold.it/100x100" alt="your image" />
</div>
<div class="upload_clear">
    <a id="clear">Remove</a>
</div>
</div>


<div class="upload_main">
<div class="upload_label">
    <label>Main Photo</label>
</div>
<div class="upload_action">
    <input type="file" name="files[]" id="control_one" class="upload_one" style="display: none;" />
    <input type="button" value="Browse..." onclick="document.getElementById('control_one').click();" />
</div>
<div class="upload_placehold">
    <img id="blah_one" src="http://placehold.it/100x100" alt="your image" />
</div>
<div class="upload_clear">
    <a id="clear_one">Remove</a>
</div>
</div>

jquery

// Main Image
var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

$("#clear").click(function(){
    $('#blah').attr('src', 'http://placehold.it/100x100');
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#control").change(function(){
    readURL(this);
});


// Second Image
var control = $("#control_one");

$("#clear_one").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

$("#clear_one").click(function(){
    $('#blah_one').attr('src', 'http://placehold.it/100x100');
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah_one').attr('src', e.target.result);
        }

       reader.readAsDataURL(input.files[0]);
    }
}

$("#control_one").change(function(){
    readURL(this);
});

示例代码中显示了2个输入，但将有7个文件输入。

如果我使用第一个文件输入选择图像，它会将预览添加到最后一个文件输入。

感谢。

Answer 1

我现在有这个工作，我会在几分钟后发布解决方案。

使用jquery在多个文件输入上显示图像预览的问题

1 个答案: