如何从< input type ='file'获取文件... /> （间接）与JavaScript [英] how to get files from <input type='file' .../> (Indirect) with javascript

问题描述

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

I have problem with "input tag" in non IE browsers

<input type="file" ...

我试图写我的上传器，只是使用javascript和asp.net。

I'm trying to write my uploader , just using javascript and asp.net.

我没有问题上传文件。

我的问题发生当我想在非IE浏览器中使用 p>

My problem occured When I wanted to get my files in non IE browsers with

<input type="file" ...

我不想直接从 input 中使用，因为它的外观没有正确更改

I do not want to use directly from input because its appearance does not change correctly

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

I wrote this code to get files from hard disk :

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完全不在。

In IE it works pretty well and returns my files currently ; In Chrome And Firefox , After loading "file input dialog" , it can't return any file. And Opera and Safari are completely out.

我可以用这个技巧修复它，但它基本上不是很好。

I can fix it with this trick , but its not good basically.

_el_upload.click();
alert();

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

I think "callback" or "wait function" may fix this , but i can't handle it.

推荐答案

如果您正在寻找样式文件输入元素，请查看。如果你想抓取与文件输入元素相关的文件，你必须做这样的事情：

If you are looking to style a file input element, look at open file dialog box in javascript. If you are looking to grab the files associated with a file input element, you must do something like this:

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

请参阅此MDN文章获取关于 FileList 类型的更多信息。

See this MDN article for more info on the FileList type.

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

Note that the code above will only work in browsers that support the File API. For IE9 and earlier, for example, you only have access to the file name. The input element has no files property in non-File API browsers.

这篇关于如何从< input type ='file'获取文件... /> （间接）与JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！