how to get files from <input type='file' .../> (Indirect) with javascript

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

<input type="file" ...

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

I have no problem uploading files.

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

<input type="file" ...

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;
}

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 https://stackoverflow.com/questions/2048026/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.  
}

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

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.

Based on Ray Nicholus's answer :

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

using this will also work :

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

Above answers are pretty sufficient. Additional to the onChange, if you upload a file using drag and drop events, you can get the file in drop event by accessing eventArgs.dataTransfer.files.