在 IE 中设置文件输入标签的 .files 时出错答案

【问题标题】：Error setting .files of file input tag in IE在 IE 中设置文件输入标签的 .files 时出错
【发布时间】：2019-05-15 23:20:40
【问题描述】：

在从一个特定输入中选择文件时，我试图将 html 元素（特别是文件输入元素）注入父 div。当这个输入选择一个文件时，它应该将该文件传递给我正在创建的输入元素。

主输入选择文件：

var file = document.getElementById("file");
file.onchange = function(){
    var ext = this.value.match(/\.([^\.]+)$/);
    if(ext!=null && ext.length>1){
        switch (ext[1].toLowerCase()) {
            case 'doc':
            ...
                if (file.files.length > 0) {
                    appendFile(file.files);
                }
                break;
            default:
                alert('Sorry, files of type .' + ext[1].toLowerCase() + " are not allowed.");
                this.value = '';
        }
    }
};

如果有文件onchange，将文件传递到appendFile

function appendFile(files){
    ...
    if(files.length>0){
        file = files[0];
        ...
        htmlFile.appendChild(createFileInput(files));
        ...
        parentDiv.append(htmlFile);
    }
}

进行额外检查以确保文件存在，生成其他 htmlElements 并将文件传递给 createFileInput 函数以创建输入标签

function createFileInput(files){
    fileInput = document.createElement("input");
    fileInput.setAttribute('type','file');
    fileInput.files=files;
    fileInput.classList.add('files');
    fileInput.style.display = 'none';
    return fileInput;
}

创建一个文件类型的输入标签，并将输入中的文件设置为等于传递给函数的文件。

这在 Chrome 中非常适合我。它在 IE 中对我来说不能正常工作，但我很确定我已经在 createFileInput() 方法中找到了 fileInput.files=files; 行的错误。

由于某种原因，这些隐藏输入的文件字段没有在 IE 中设置。有谁知道这是为什么，或者知道设置输入文件字段的不同方法？

【问题讨论】：

标签： javascript file internet-explorer input bulma

【解决方案1】：

我最终只包含了一个隐藏的<input> 标签并触发了对该输入的点击以获取文件。在获取该标签的文件后，我生成了一个新的<input> 标签，然后在用户下次单击导入文件时触发该标签。我只是继续这个过程，直到用户完成导入文件

基本上我把我的代码改成了这个

function triggerFileClick(){
    var files = document.getElementsByClassName('files');
    var file = files[files.length-1];
    file.onchange = function(){
        var ext = this.value.match(/\.([^\.]+)$/);
        if(ext!=null && ext.length>1){
            switch (ext[1].toLowerCase()) {
                case 'doc':
                ...
                    if (file.files.length > 0) {
                        appendFile(file.files);
                    }
                    break;
                default:
                    alert('Sorry, files of type .' + ext[1].toLowerCase() + " are not allowed.");
                    this.value = '';
            }
        }
    };
    file.click();
}

当用户点击文件导入按钮时，会触发该功能。由于我在 html 中已经有一个 <input> 标记（带有类“文件”），它会触发对该文件的单击。然后，该文件的 onchange 运行我的 appendFile() 函数，该函数又将另一个带有“文件”类的 <input> 标记插入到 dom 中。所以下次点击添加文件按钮时，会触发点击新添加的<input>标签。

【讨论】：