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

如果您要设置文件输入元素的样式，请查看open file dialog box in javascript。如果要查找与文件输入元素关联的文件，则必须执行以下操作：

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

有关FileList类型的详细信息，请参阅this MDN article。

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

Answer 2

以上答案已足够。除了onChange之外，如果您使用拖放事件上传文件，还可以通过访问drop来获得eventArgs.dataTransfer.files事件中的文件。

Answer 3

基于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.  
}

如何使用javascript从<input type =“file”... =“”/>（间接）获取文件

3 个答案: