当从一个特定的输入中选择文件时,我尝试将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中设置。有没有人知道为什么会这样,或者知道另一种设置输入文件字段的方法?
发布于 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>
标记的单击。
https://stackoverflow.com/questions/56158824
复制相似问题