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

186
10 марта 2018, 20:55

Есть код, который выводит изображения, которые были добавлены в <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/>

Answer 1

$(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/>

READ ALSO
Гиперссылки как у iCloud Pages

Гиперссылки как у iCloud Pages

Добрый день, как сделать гиперссылки как у iCloud Pages когда пишешь сайт и он сразу становится ссылкой как и в Google DocsИмеется div contenteditable="true"

122
input как отправить или снять фокус без form

input как отправить или снять фокус без form

Сайт запаковывается Cordova и становится приложением для AndroidЕсть несколько input, форма в моем случае не подходит, все они без неё

168
&#226;€™ при перекодировке текста с CP1252 в UTF-8

’ при перекодировке текста с CP1252 в UTF-8

В начале я имею вот такой текст:

220
как исправит ошибку PHP CORE WARNING – YII\BASE\ERROREXCEPTION

как исправит ошибку PHP CORE WARNING – YII\BASE\ERROREXCEPTION

когда слил сайт на хостинг выводит ошибку PHP CORE WARNING – YII\BASE\ERROREXCEPTION половина страниц выводится без ошибкина локальноь сервере ошибок нет

230