Как добавить/удалить кнопку для нескольких загруженных файлов?

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

Js:

window.imagePreview = function (t) {
    if (t.files && t.files[0]) {
        for (var i = 0; t.files.length >= i; i++) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#image-preview').append('<img src="' + this.result + '"/>');
            };

            reader.readAsDataURL(t.files[i]);
        }
    }
}

CSS:

.btn-file{
    position: relative;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
}

#image-preview {
    width: 100%;
    max-height: 260px;
    height: 260px;
    overflow-y: auto;
    background-color: #F0F0F0;
    border: 1px dashed #928f8f;
    border-radius: 4px;
    margin-bottom: 10px;
}


#image-preview img {
    max-width: 120px;
    max-height: 120px;
    display: inline-block;
    margin: 5px;
}

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="image-preview"></div>
  <span class="btn btn-primary btn-file">
    <input type="file" name="file[]" id="file" class="" multiple onchange="imagePreview(this)" style="width: 0;height: 0;">
      Select Files
  </span>

JSfiddle

И как исправить эту ошибку:

Uncaught TypeError: не удалось выполнить «readAsDataURL» для «FileReader»: параметр 1 не имеет типа «Blob»


javascript html jquery file-upload multiple-file-upload
person Gihan Rangana    schedule 15.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проверьте этот код, чтобы убедиться, что это то, что вы хотите.

window.imagePreview = function (t) {
    if (t.files && t.files[0]) {
        for (var i = 0; t.files.length > i; i++) {
            var reader = new FileReader();
            reader.onload = function (e) { 
                var thumbnail = '<div>';
                    thumbnail += '<img class="image" src="' + e.target.result + '"/>';
                    thumbnail += '<button class="removeButton">Remove File</button>';
                    thumbnail += '</div>';
                $('#image-preview').append(thumbnail); 

                $(".removeButton").on("click", function(){
                   $(this).closest('div').remove();
                   document.getElementById("file").value = "";
                });

            };
            reader.readAsDataURL(t.files[i]);
        }
    }
}

Кстати, ошибка, которую вы получили, связана с тем, что вы установили t.files.length >= i, из-за чего цикл запускается еще раз, и в последний раз, когда он запускается, нет доступных файловых данных.

JSfiddle

person Eliellel    schedule 15.12.2017
comment
Здравствуйте, я пытаюсь запустить этот код, но он не работает. Firefox работает только в Chrome. - person Bynd; 26.05.2018
comment
@Bynd Код javascript работает нормально. Я думаю, что проблема у вас как-то связана с тем, как Firefox обрабатывает html-элементы. Попробуйте изменить html на эту структуру, и это должно решить проблему: <label for="file" class="btn btn-primary btn-file"><input ...... /> <label> т.е. использовать метку вместо диапазона для переноса ввода. - person Eliellel; 29.05.2018
comment
Вы умничка, СПАСИБО БОЛЬШОЕ - person Bynd; 30.05.2018