在IE中设置文件输入标记的.files时出错
在IE中设置文件输入标记的.files时出错
提问于 2019-05-16 07:20:40
当从一个特定的输入中选择文件时，我尝试将html元素(特别是文件输入元素)注入到父div中。当此输入选择一个文件时，它应该将该文件传递给我正在创建的input元素。
主输入选择文件：
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;
}创建一个file类型的输入标记，并将输入中的文件设置为等于传递到函数中的文件。
这在Chrome中非常适合我。它在IE中不能正常工作，但我非常确定我已经在createFileInput()方法中跟踪到了fileInput.files=files;行的错误。
由于某些原因，这些隐藏输入的文件字段无法在IE中设置。有没有人知道为什么会这样，或者知道另一种设置输入文件字段的方法？
回答 1
Stack Overflow用户
发布于 2019-05-16 09:21:12
我最终只包含了一个隐藏的<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>标记(带有类'files')，所以它会触发对该文件的单击。然后，该文件的onchange运行我的appendFile()函数，该函数将另一个带有'files‘类的<input>标记插入到dom中。因此，下次单击add files按钮时，会触发对新添加的<input>标记的单击。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56158824
复制相关文章
相似问题