Question

请你看一下这个片段，让我知道为什么我无法将最近的图像元素定位到文件输入

$('.file').on('change', function(ev) {
   var f = ev.target.files[0];
   var fr = new FileReader();
   fr.onload = function(ev2) {
     $(this).closest('.img').attr('src', ev2.target.result);
     $(this).find('.img').attr('src', ev2.target.result);
     $(this).next('.img').attr('src', ev2.target.result);
   };
   fr.readAsDataURL(f);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />

如你所见，我已经尝试了

 $(this).closest('.img').attr('src', ev2.target.result);
 $(this).find('.img').attr('src', ev2.target.result);
 $(this).next('.img').attr('src', ev2.target.result);

但它没有完成这项工作

Answer 1

你必须找到最接近改变的输入文件的img，所以你必须使用ev.target，因为在第二个函数范围内更改并且这不再引用文件输入，这样的东西似乎有效：< / p>

＆＃13;

$('.file').on('change', function(ev) {
   var f = ev.target.files[0];
   var fr = new FileReader();
   fr.onload = function(ev2) {
     $(ev.target).next('.img').attr('src', ev2.target.result);
   };
   fr.readAsDataURL(f);
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />

＆＃13;

无法将最近的img元素定位到文件输入元素

1 个答案: