Question

我在带有选择文件字段的rails表单中有一个file_field_tag：

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

我还有一个区域可以预览图像/视频并在需要时删除：

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

一切正常，但是只有一个小故障。...如果图像/视频位于单独的文件夹中，则我必须先从一个文件夹中添加文件，然后再从另一个文件夹中添加文件。这些文件显示在预览中，但是在此过程之后，当我提交表单时，仅保存了第二批文件。这是上述所有内容的javascript：

window.onload = function(){
    if(window.File && window.FileList && window.FileReader)
    {

        var filesInput = document.getElementById("files");


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


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

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

                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);
                    });

                });

                picReader.readAsDataURL(file);
            }

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

Answer 1

根据要实现的目标，可以将文件保存到数组变量中：

////////////////////////////////
// Create an array for the files somewhere
var fileCache = [];
////////////////////////////////

window.onload = function(){
    if(window.File && window.FileList && window.FileReader)
    {

        var filesInput = document.getElementById("files");


        filesInput.addEventListener("change", function(event){


            var files = event.target.files; 
            var output = document.getElementById("result");

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];
				

                if (!file.type.match(/.(jpg|jpeg|png|gif|mp4|avi|flv|wmv|mov|tiff|bmp|exif)$/i))
                     continue;
					 
				////////////////////////////////
				// Add each file to the array as you process it
				fileCache.push(file);
				////////////////////////////////

                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);
                    });

                });

                picReader.readAsDataURL(file);
            }
        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}

<input type="file" id="files" />

通常，我会避免使用随机全局变量，但是在不确切知道要对文件列表进行操作的情况下，这是最通用的答案。

Javascript getElementById但保留旧值

1 个答案: