Question

我正在尝试实现以下代码，该代码适用于一个输入文件，但我希望使用两个表单和两个不同的div使用相同的东西。

window.preview = function(input) {
    if (input.files && input.files[0]) {
        $(input.files).each(function(){
            var reader = new FileReader();
            reader.readAsDataURL(this);
            reader.onload = function(e) {
                $("#messages-list").append("<li class='text-message-img'><img class='thumb' src='" + e.target.result + "'></li>");
            }
        });
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="picture-upload">
    <span>
        <img src="images/icons.png">
        Click to upload
    </span>
    <input class="upload" type=file onchange="preview(this);" accept="image/*" value="">
</form>

但问题是我想使用在不同div中显示的两个表单。如何选择两个不同的表单输入并将结果显示在两个不同的div中？

Answer 1

您可以将目标元素的id传递给预览函数：

window.preview = function(input, element) {
    if (input.files && input.files[0]) {
        $(input.files).each(function(){
            var reader = new FileReader();
            reader.readAsDataURL(this);
            reader.onload = function(e) {
                $(element).append("<li class='text-message-img'><img class='thumb' src='" + e.target.result + "'></li>");
            }
        });
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="picture-upload">
    <span>
        <img src="images/icons.png">
        Click to upload
    </span>
    <input class="upload" type=file onchange="preview(this, '#messages-list');" accept="image/*" value="">
</form>

javascript的window.preview函数

1 个答案: