Question

当我从一个特定的输入中选择一个文件时，我试图将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 = '';
        }
    }
};

如果文件发生更改，请将文件传递到appendFile

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

进行额外的检查以确保文件存在，生成其他htmlElement并将文件传递给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中无法正常工作，但是我敢肯定，我已经在fileInput.files=files;方法中将错误跟踪到了createFileInput()行。

由于某些原因，这些隐藏输入的文件字段未在IE中设置。有谁知道这是为什么，或者知道以其他方式设置输入的文件字段吗？

Answer 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()函数，该函数又将另一个带有类'files'的<input>标签插入dom。因此，下次单击添加文件按钮时，它将触发对新添加的<input>标签的点击。

在IE

1 个答案: