input type file

126

05 июля 2019, 00:00

Подскажите как перебрать в jquery картинки из массива

есть код

$(function() { 
  function readURL(input) { 
    $(input.files).each(function(i, el) { 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
        $('<img>').attr('src', e.target.result).appendTo('#im'); 
      }; 
      reader.readAsDataURL(input.files[i]); 
    }); 
  } 
 
  $("#imgInput").change(function() { 
    readURL(this); 
  }); 
});

img { 
  width: auto; 
  height: 80px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input type="file" name="bn" id="imgInput" multiple> 
<div id="im"></div>

при загрузке каждой фото мне нужно вставить в li

<ul class="ai_image__list ui-sortable" id="sortable" rotation="0">                            
        <li class="ai_image__upload"></li>
        <li class="ai_image__upload"></li>
        <li class="ai_image__upload"></li>
        <li class="ai_image__upload"></li>
        <li class="ai_image__upload"></li>
</ul>

вот например я удалил из списка одно изображение, то мне нужно удалить и в общем img[], а если я вместо удаленного новое добавил то присоединить

Answer 1

Поддерживает выбор нескольких картинок сразу.

let input = document.getElementById("input"); 
let ul = document.getElementById("ul") 
 
input.addEventListener("change", e => { 
  ul.innerHTML = ""; 
  for (var i = 0; i < e.srcElement.files.length; i++) { 
    let file = e.srcElement.files[i]; 
    let li = document.createElement("li"); 
    let img = document.createElement("img"); 
    li.append(img); 
    let reader = new FileReader(); 
    reader.onloadend = function() { 
      img.src = reader.result; 
      ul.appendChild(li); 
    } 
    reader.readAsDataURL(file); 
  } 
});

ul>li>img { 
  width: 30px; 
  margin: 10px; 
}

<input type="file" id="input" accept=".jpg,.jprg,.png" multiple> 
<ul id="ul"></ul>

Answer 2

FileList у input только для записи. Поэтому вместо манипуляций с ним предлагаю использовать отдельный массив, куда добавляются выбранные файлы.
При клике по списку элемент удаляется и из списка и из массива.

(function() { 
  const inputImage = $('#input-image'); 
  const imagesList = $('#images-list'); 
  const images = []; 
 
  inputImage.on('change', changeHandler); 
 
  function changeHandler(e) { 
    addImage(e.target.files[0], imagesList); 
  } 
 
  function addImage(image, parent) { 
    images.push(image); 
    const reader = new FileReader(); 
    const item = $('<li>').attr('key', images.length); 
    item.appendTo(parent); 
    item.on('click', itemClickHandler); 
    reader.onload = function(e) { 
      $('<img>').attr('src', e.target.result).appendTo(item); 
    } 
    reader.readAsDataURL(image) 
  } 
 
  function itemClickHandler(e) { 
    const item = ($(e.target).prop('tagName').toLowerCase() === 'img') ? 
      $(e.target).parent() : 
      $(e.target); 
 
    images.splice(item.attr('key') - 1, 1); 
 
    $(item).remove(); 
  } 
})()

img { 
  width: auto; 
  height: 80px; 
}

<input id="input-image" type="file"> 
<ul id="images-list"></ul> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

input type file

Как разрешить модель-представление в PRISM

C# List удалить элемент списка

Как можно получить строку подключения к базе данных Oracle из другого приложения

Как получить данные из БД-MySql в ObservableCollection?