Как создать вложенные элементы в JQuery внутри списка - PullRequest
0 голосов
/ 02 июля 2018

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

Мои html-коды

<input type="file" id="ad_images" multiple accept="image/*" />

<ul id="gallery"></ul>

Мои коды JQuery:

window.onload = function() {
    (function(){
        function previewImage(file) {
            var gallery = document.getElementById("gallery");

            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                throw "File Type must be an image";
            }

            var e_li = document.createElement ("li");           //create li
            var e_figure = document.createElement ("figure");   //create figure

            e_figure.appendChild(e_img);                        //put img inside figure
            e_li.appendChild(e_figure);                         //put figure inside li
            gallery.appendChild(e_li);                          //put li inside gallery

            // Using FileReader to display the image content
            var reader = new FileReader();
            reader.onload = (function(aImg) {
                return function(e) {
                    aImg.src = e.target.result;
                }; 
            })(e_img);
            reader.readAsDataURL(file);
        }
        var uploadfiles = document.querySelector('#ad_images');
        uploadfiles.addEventListener('change', function () {
            var files = this.files;
            for(var i=0; i<files.length; i++){
                previewImage(this.files[i]);
            }
        }, false);
    })();
}

После того, как я выберу одно / несколько изображений, мой результат должен быть таким:

<ul id="gallery">
    <li>
        <figure>
            <img src="IMAGE">
        </figure>
    </li>
    <li>
        <figure>
            <img src="IMAGE">
        </figure>
    </li>
    ...
</ul>

Заранее спасибо.

1 Ответ

0 голосов
/ 02 июля 2018

Вам не хватает элемента изображения. var e_img = document.createElement ('img');

http://jsbin.com/piyuqozasi/edit?html,js,output

function previewImage(file) {
  console.log(file);
  var gallery = document.getElementById("gallery");

  var imageType = /image.*/;
  if (!file.type.match(imageType)) {
    throw "File Type must be an image";
  }

  var e_img = document.createElement('img');

  var e_li = document.createElement ("li");           //create li
  var e_figure = document.createElement ("figure");   //create figure

  e_figure.appendChild(e_img);                        //put img inside figure
  e_li.appendChild(e_figure);                         //put figure inside li
  gallery.appendChild(e_li);                          //put li inside gallery

  // Using FileReader to display the image content
  var reader = new FileReader();
  reader.onload = (function(aImg) {
    return function(e) {
      aImg.src = e.target.result;
    }; 
  })(e_img);
  reader.readAsDataURL(file);
}

var uploadfiles = document.querySelector('#ad_images');

uploadfiles.addEventListener('change', function () {
  var files = this.files;
  console.log(files);
  for(var i=0; i<files.length; i++){
    previewImage(this.files[i]);
  }
}, false);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...