Ошибка отображения предварительного просмотра изображения перед загрузкой - PullRequest
Новая
       6

Ошибка отображения предварительного просмотра изображения перед загрузкой

0 голосов
/ 07 мая 2018

Я использую следующий код для загрузки изображения с нескольких входов и отображения предварительного просмотра. Я могу просматривать предварительный просмотр только первого ввода. Когда дело доходит до трех других, это не работает.

SCRIPT 

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]);
  }
}

HTML 

<input type='file' onchange="readURL(this);" />
<img id="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img id="blah2" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img id="blah3" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img id="blah4" src="http://placehold.it/180" alt="your image" />

ПРИМЕЧАНИЕ: Есть ли способ без изменения HTML и внесения небольших изменений в сценарий, как отображать предварительный просмотр.

Я использую Bootstrap v3.3

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Вот что вы можете сделать без изменения HTML. Используя nextElementSibling , вы можете получить следующий элемент и присвоить ему значение src.

Альтернативой является функция jQuery .next () , которая аналогична. 

$(input).next().attr('src', url);

Я также предлагаю использовать URL-адреса объектов вместо чтения файла как dataURL, что требует времени для компиляции и декомпиляции между строкой в ​​кодировке base64, где в качестве URL-адреса объекта используется только указатель на файл. 

function readURL(input) {
  if (input.files && input.files[0]) {
    var url = URL.createObjectURL(input.files[0]);
    input.nextElementSibling.src = url;
    // $(input).next().attr('src', url);
  }
}

Если вы могли бы, возможно, добавить дополнительный атрибут к входному файлу accept="image/*", чтобы они выбрали только действительный файл изображения

0 голосов
/ 13 мая 2018

Вам нужно добавить jQuery в ваш HTML-файл 

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]);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" onchange="readURL(this)"/>
<img src="#" id="blah" />
0 голосов
/ 11 мая 2018

на самом деле проблема в том, что вы используете 

$('#blah')

, поэтому каждый раз, когда вы обновляете только один тег изображения, вам нужно соответствующим образом нацелить тег diff img, один из способов сделать это -

Html 

<input type='file' onchange="readURL(this, 'blah');" />
 <img id="blah" src="http://placehold.it/180" alt="your image" />
 <input type='file' onchange="readURL(this, 'blah2');" />
 <img id="blah2" src="http://placehold.it/180" alt="your image" />
 <input type='file' onchange="readURL(this, 'blah3');" />
 <img id="blah3" src="http://placehold.it/180" alt="your image" />
  <input type='file' onchange="readURL(this, 'blah4');" />
  <img id="blah4" src="http://placehold.it/180" alt="your image" />

теперь вы получаете diff id тега img каждый раз, когда вы выглядите как функция js.

JS 

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

теперь все работает, удачи

...