Question

我想在上传之前预览图片。在我的例子中，它有一些输入标记，如果我使用属性来捕获节点和设置值，所有节点将显示相同的图片。

        @foreach($products as $item)
        <tr>
           <th><input class='imgInp' type="file" name="icon"/><img src ='' alt="" class='thumb'/></th>
        </tr>
        @endforeach

我尝试使用event.target（输入）来捕获兄弟节点（img）并设置值，但它不起作用

    function readURL(input){
    if(input.files && input.files[0]){
        var reader = new FileReader();
        reader.onload = function(e){
            $(e).next().attr('src', e.target.result);      
        };
        reader.readAsDataURL(input.files[0]);
    }
}
$('.imgInp').change(function(){
    readURL(this);
});

Answer 1

您的问题在这一行：

$(e).next().attr('src', e.target.result);

将其更改为：

$(input).next().attr('src', e.target.result);

此外，我假设您正在向表体添加行。所以，用td更改th元素。

function readURL(input){
    if(input.files && input.files[0]){
        var reader = new FileReader();
        reader.onload = function(e){
            $(input).next().attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

$('.imgInp').change(function(){
    readURL(this);
});

.thumb {
    width: 100px;
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <tbody>
    <tr>
        <td><input class='imgInp' type="file" name="icon"/><img src='' alt="" class='thumb'/></td>
    </tr>
    <tr>
        <td><input class='imgInp' type="file" name="icon"/><img src='' alt="" class='thumb'/></td>
    </tr>
    </tbody>
</table>

如何在javascript更改事件中获取兄弟节点和设置值？

1 个答案: