Как просмотреть несколько входов

javascript jquery image preview

571 просмотра

2 ответа

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

Как я могу добавить больше входов, каждый со своим изображением, чтобы просмотреть этот конкретный вход?

Мой код выглядит так:

HTML:

<input type="file" accept="image/*" onchange="previewFile()">
<img id="output1" height="100px">

и Javascript:

function previewFile(){
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        }
        else {
            preview.src = "";
        }
    }

Я думаю, что Var должна быть дана функции, выход которой я хочу выбрать, но я совершенно новичок в Js, так что, возможно, Вы можете мне помочь!

Спасибо!

Редактировать:

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

Все это прекрасно работает для одного div, но мне нужно еще 11, каждый работает отдельно, чтобы пользователь мог управлять порядком своих фотографий, которые он собирается загрузить.

Итак, что мне нужно сделать, чтобы каждый из 12 тегов загрузки работал отдельно со своим предварительным изображением?

Автор: jonas.ley Источник Размещён: 08.11.2019 10:54

Ответы (2)


1 плюс

Решение

Редактировать:

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

Все это прекрасно работает для одного div, но мне нужно еще 11, каждый работает отдельно, чтобы пользователь мог управлять порядком своих фотографий, которые он собирается загрузить.

Итак, что мне нужно сделать, чтобы каждый из 12 тегов загрузки работал отдельно со своим предварительным изображением?

Element.idдолжен быть уникальным в document. Вы можете передать выбранный элемент для previewFile()вызова, используйте, .nextElementSiblingчтобы выбрать <img>элемент родного брата

function previewFile(input) {
  var preview = input.nextElementSibling;
  var file = input.files[0];
  var reader = new FileReader();

  reader.onloadend = function() {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>

Автор: guest271314 Размещён: 20.08.2016 05:17

0 плюса

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
    elPreview = document.getElementById("preview"),
    useBlob   = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
  var reader = new FileReader();
  reader.addEventListener("load", function () {
    var image  = new Image();
    image.addEventListener("load", function () {
      var imageInfo = file.name    +' '+
                      image.width  +'×'+
                      image.height +' '+
                      file.type    +' '+
                      Math.round(file.size/1024) +'KB';
      elPreview.appendChild( this );
      elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    if (useBlob) {
      window.URL.revokeObjectURL(file); // Free memory
    }
  });
  reader.readAsDataURL(file);  
}

elBrowse.addEventListener("change", function() {
  var files  = this.files;
  var errors = "";
  if (!files) {
    errors += "File upload not supported by your browser.";
  }
  if (files && files[0]) {
    for(var i=0; i<files.length; i++) {
      var file = files[i];
      if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
        readImage( file ); 
      } else {
        errors += file.name +" Unsupported Image extension\n";  
      }
    }
  }
  if (errors) {
    alert(errors); 
  }
});
#preview img{height:100px;}	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="browse" type="file"  multiple />
<div id="preview"></div>

Автор: Roma Размещён: 20.08.2016 05:15
Вопросы из категории :
32x32