Удаление изображения из массива формы — javascript jquery form

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Вопрос:


Есть код, который выводит изображения, которые были добавлены в <input> и там есть кнопка удаления изображения, но у меня никак не получается удалить их из массива формы. Как это можно сделать?

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class="pip">" +
            "<img class="imageThumb" src="" + e.target.result + "" title="" + file.name + ""/>" +
            "<br/><span class="remove">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function() {
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="files" name="files[]" multiple/>
Автор вопроса: NTP

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
      $("#files").on("change", function(e) {
          var files = e.target.files,
            filesLength = files.length;
          for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {
              var file = e.target;
              $("<span class="pip">" +
                "<img class="imageThumb" src="" + e.target.result + "" title="" + file.name + ""/>" +
                "<br/><span class="remove">Remove image</span>" +
                "</span>").insertAfter("#files");


          }); fileReader.readAsDataURL(f);
      }
    });
}
else {
  alert("Your browser doesn't support to File API")
}
$('body').on("click", ".remove", function() {
var filestoupload = [];

index = $(this).index();
console.log('удаляем файл: ', index)
filestoupload.splice(index, 1);
$(this).parent().remove();
$("#files").val("");
console.log('files to upload: ', filestoupload.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="files" name="files[]" multiple/>

Источник

Вам также может быть интересно:

Картинка увеличивается и уменьшается — html css google-chrome
Вопрос: Как сделать так чтобы картинка не увеличивалась и не уменьшалась когда прибавляешь проценты в браузере. Если увеличивать в браузере или уменьшать страницу чтобы изображение ...
Алгоритмы. Стенка из блоков — алгоритм математика
Вопрос: Имеется неограниченое поле MxN. На нём расположены блоки прямоугольной формы 1х1, 1х2, 1х3, 2х2 и т.д. до 8х8. Количество ограничено. Блоки могут располагаться как ...
Ковариантность через инвариантный параметр — c#
Вопрос: Есть конструкция вот такого вида class TypeBase { } class TypeConcrete : TypeBase { } interface IGeneric<T> { } class Generic<T> : IGeneric<T> where T: TypeBase { } И ...
Как в Ubuntu управлять кулером? — linux ubuntu
Вопрос: Вопрос в следующем, стоит Ubuntu как 2-я система. Скажите, есть ли утилита или в терминале функция через которую можно управлять кулером на ЦП? Fancontrol ...
Как сделать что бы после точки и по нажатию на enter в EditText / multiline слово писалось с большой буквы? — java android android-studio
Вопрос: Как я могу сделать, чтобы после точки и по нажатию на Enter (т.е перевод на новую строку), в EditText (multiline) слово писалось с большой ...
Раскодировать UCS2 — javascript кодировка перекодировка
Вопрос: Вот это текст в UCS2: 004F0043005400410054004F004B002000380033002E0032003700200070002E0020003700200434043D043504390020043C04430437044B043A0438002E0020041104350437043B0438043C04380442043D043E002004380020043104350441043F043B04300442043D043E003A0020002A0036003200360023 Через онлайн конвертер все работает и текст переводится в нормальную кириллицу.Ссылка тут. Как мне в JS ...
Здравствуйте Можете ли вы проверить если я ответил правильно на задачу из книги по c++ — c++ c++14
Вопрос: код: #include <iostream> #include <string> using namespace std; int main() { ...
Права юзера над другим юзером в django — python python-3.x django
Вопрос: Как сделать чтоб тип юзеров или группа ( допустим учитель) мог изменять информацию про студента ( стандартного юзера) но только одно поле (avg_mark). И как ...
Помогите пожалуйста с вёрсткой навигационной панели слайдера — javascript html css
Вопрос: Использую slick slider. При выборе слайда или просто прокрутке в секции миниатюр, почему то забрасывает блок с слайдами очень далеко, не могу понять почему, ...
Раздача данных своим рабочим процессам — delphi многопоточность
Вопрос: Есть служба, которая запускает несколько процессов, которым она будет передавать данные (объекты размером около 10кб). Обратно передавать ничего не надо. Для этого есть несколько ...
WPF XAML Visual Stuidio Intellisense ResourceDictionary dll — wpf xaml
Вопрос: Здравствуйте. Не работают подсказки intellisense для стилей, определённые во внешней сборки dll. При этом со стилями можно работать, приложение работает. Получается, что имена стилей ...
Время умножения матриц различных размеров — c++ gcc матрицы
Вопрос: Добрый день, есть класс Matrix (репрезентирует матрицу): class Matrix { private: long long **table; int n; // rows ...
Странное поведение keyframes — css keyframes
Вопрос: Ситуация следующая, когда кубу нужно повернуться по оси Х (с -40deg на 40deg), он почему-то подпрыгивает , при этом в конце анимации я делаю ...
Laravel многие ко многим — php laravel laravel5
Вопрос: Есть три таблицы в БД. Связь многие ко многим Модели Sample.php public function services() { return $this->belongsToMany('AppService'); } Service.php public function samples() { return $this->belongsToMany('AppSample'); } Если бы ...
Как получить данные из массива js? — javascript javascript
Вопрос: На данный вопрос уже ответили: ...

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *