如何使用javascript从<input type ='file'... />(间接)获取文件

Question

我在非IE浏览器中遇到"输入标签"的问题

<input type="file" ...

我正在尝试编写我的上传器,只需使用javascript和asp.net.

我上传文件没问题.

我的问题发生当我想在非IE浏览器中获取我的文件时

<input type="file" ...

我不想直接使用,input因为它的外观没有正确改变

我写了这段代码来从硬盘上获取文件:

function $tag(_str_tag) {
return document.getElementsByTagName(_str_tag);
}

function $create(_str_tag) {
    return document.createElement(_str_tag);
}


function $open_file() {
    _el_upload = $create("input");
    _el_body = $tag("body")[0];
    _el_upload.setAttribute("type", "file");
    _el_upload.style.visibility = "hidden";
    _el_upload.setAttribute("multiple", "multiple");
    _el_upload.setAttribute("position", "absolute");
    _el_body.appendChild(_el_upload);
    _el_upload.click();
    _el_body.removeChild(_el_upload);
    return _el_upload.files;
}

在IE中它工作得很好并且当前返回我的文件; 在Chrome和Firefox中,加载"文件输入对话框"后,它无法返回任何文件.Opera和Safari完全没了.

我可以用这个技巧解决它,但它基本上不好.

_el_upload.click();
alert();

我认为"回调"或"等待功能"可以解决这个问题,但我无法处理它.

Answer 1

如果您要设置文件输入元素的样式,请在javascript中查看打开文件对话框.如果要查找与文件输入元素关联的文件,则必须执行以下操作:

inputElement.onchange = function(event) {
   var fileList = inputElement.files;
   //TODO do something with fileList.  
}

有关类型的更多信息,请参阅此MDN文章FileList.

请注意,上面的代码仅适用于支持File API的浏览器.例如,对于IE9及更早版本,您只能访问文件名.input元素files在非File API浏览器中没有属性.

Answer 2

根据Ray Nicholus的回答：

inputElement.onchange = function(event) {
   var fileList = inputElement.files;
   //TODO do something with fileList.  
}

使用它也可以：

inputElement.onchange = function(event) {
   var fileList = event.target.files;
   //TODO do something with fileList.  
}