Rails: field_tag ​​с javascript для предварительного просмотра файлов, которые работают неправильно - PullRequest
0 голосов
/ 14 ноября 2018

У меня есть file_field_tag внутри формы рельсов с полем выбора файла:

<%= file_field_tag "attachments[media_files][]", multiple: true, id: "files" %>

И у меня есть область для предварительного просмотра изображений / видео и удаления при необходимости:

<span id="result"></span>

Все работает правильно, но есть только один глюк .... Если изображения / видео находятся в разных папках, мне нужно сначала добавить файлы из одной папки, а затем из другой папки. Но после этого процесса сохраняется только вторая партия файлов.

Вот javascript для всего вышеперечисленного:

window.onload = function(){

    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("result");

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                //Allowed files
                //if (!file.type.match(/.(jpg|jpeg|png|gif|mp4|avi|flv|wmv|mov|tiff|bmp|exif)$/i))
                     //continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var span = document.createElement("span");

                    span.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');



                    output.insertBefore(span,null);
                    span.children[1].addEventListener("click", function(event){
                        span.parentNode.removeChild(span);
                    });


                });


                //Read the image
                picReader.readAsDataURL(file);

            }

        });
    }
    else
    {
        console.log("Your browser does not support File API");
        alert("Your browser does not support File API")
    }
}

Есть идеи как исправить этот глюк ??

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...