59

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

<input type="file" ...

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

我上传文件没有问题。

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

<input type="file" ...

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

我编写了这段代码来从硬盘获取文件：

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();

我认为“回调”或“等待功能”可以解决这个问题，但我无法处理。

4

3 回答 3

88

如果您要设置文件输入元素的样式，请查看javascript 中的打开文件对话框。如果您要获取与文件输入元素关联的文件，则必须执行以下操作：

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

有关该类型的更多信息，请参阅此 MDN 文章FileList。

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

于 2013-04-03T16:29:00.560 回答
21

基于 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.  
}
于 2019-06-14T04:17:03.927 回答
1

上面的答案已经足够了。除了onChange，如果您使用拖放事件上传文件，您可以drop通过访问eventArgs.dataTransfer.files.

于 2019-08-06T13:34:19.817 回答