如何從中獲取文件 <input type='file' …/> （間接）與javascript

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

有關FileList類型的更多信息，請參見此MDN文章 。

請注意，上面的代碼僅在支持File API的瀏覽器中有效。 例如，對於IE9和更早版本，您只能訪問文件名。 在非File API瀏覽器中，input元素沒有files屬性。

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

Answer 3

以上答案就足夠了。 除了onChange ，如果您使用拖放事件上傳文件，則可以通過訪問eventArgs.dataTransfer.files在drop event中獲取eventArgs.dataTransfer.files 。