显示HTML5 <input type =“ file”>所选图像文件的预览图像

Question

对不起，如果问题不对，

我想display特别是image在img标签的时候<input type=file>。

$(':input[type=file]').change( function(event) {
	var tmppath = URL.createObjectURL(event.target.files[0]);
	$(this).closest("img").attr('src',tmppath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file1" name="file1">
    <font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
    <img src="" id="img1" class="img1" height="100px" width="100px"><br>
<input type="file" id="file2" name="file2">
    <font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
    <img src="" id="img2" class="img1" height="100px" width="100px"><br>
<input type="file" id="file3" name="file3">
    <font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
    <img src="" id="img3" class="img1" height="100px" width="100px">

这是我的jsfiddle

Answer 1

尝试以下操作：您必须使用.next()而不是，.closest()因为next用于查找下一个元素，而closest用于查找匹配的父元素。见下面的代码

$(':input[type=file]').change( function(event) {
	var tmppath = URL.createObjectURL(event.target.files[0]);
	$(this).next("img").attr('src',tmppath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file1" name="file1">
<img src="" id="img1" class="img1" height="100px" width="100px"><br>
<input type="file" id="file2" name="file2">
<img src="" id="img2" class="img1" height="100px" width="100px"><br>
<input type="file" id="file3" name="file3">
<img src="" id="img3" class="img1" height="100px" width="100px">

有关.next（）和.closest（）的更多信息

编辑：由于OP更改了html结构，因此我对答案做了一些更改，如下所示。通过将输入元素和图像元素放入div进行分组，并在脚本中进行所需的更改。

$(':input[type=file]').change( function(event) {
	var tmppath = URL.createObjectURL(event.target.files[0]);
    //get parent using closest and then find img element
	$(this).closest("div").find("img").attr('src',tmppath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<input type="file" id="file1" name="file1"><br>
<font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
<img src="" id="img1" class="img1" height="100px" width="100px"><br>
</div>
<div>
<input type="file" id="file2" name="file2"><br>
<font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
<img src="" id="img2" class="img1" height="100px" width="100px"><br>
</div>
<div>
<input type="file" id="file3" name="file3"><br>
<font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
<img src="" id="img3" class="img1" height="100px" width="100px">
</div>