2013-04-03 30 views
10

Tôi có vấn đề với "thẻ đầu vào" trong các trình duyệt IE khônglàm thế nào để có được file từ <input type = 'file' ... /> (gián tiếp) với javascript

<input type="file" ... 

Tôi đang cố gắng để viết người tải lên của tôi, chỉ cần sử dụng javascript và asp.net.

Tôi không gặp sự cố khi tải tệp lên.

Vấn đề của tôi xảy ra Khi tôi muốn để có được tác phẩm của tôi trong các trình duyệt không IE với

<input type="file" ... 

Tôi không muốn sử dụng trực tiếp từ input vì sự xuất hiện của nó không thay đổi một cách chính xác

tôi đã viết mã này để nhận tệp từ đĩa cứng:

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

Trong IE, nó hoạt động khá tốt và trả về tệp của tôi hiện tại; Trong Chrome và Firefox, Sau khi tải "hộp thoại nhập tệp", nó không thể trả về bất kỳ tệp nào. Và Opera và Safari là hoàn toàn ra ngoài.

Tôi có thể sửa nó bằng thủ thuật này, nhưng nó không tốt về cơ bản.

_el_upload.click(); 
alert(); 

Tôi nghĩ "callback" hoặc "wait function" có thể khắc phục điều này, nhưng tôi không thể xử lý.

+1

Bạn có ý gì khi 'giao diện của nó không thay đổi chính xác' Bạn đang cố gắng làm gì? –

+0

Bạn cần sử dụng sự kiện 'onchange' của phần tử' '. 'return _el_upload.files' xảy ra * trước * bạn chọn một tệp. –

+0

hi @RocketHazmat thx để trả lời: i am tring để làm cho giao diện người dùng của riêng tôi trong CMS của tôi và tôi có vấn đề với design; tôi không muốn nhìn thấy một hộp văn bản gần một nút có tên là "tải lên tệp" –

Trả lời

28

Nếu bạn đang tìm cách tạo kiểu cho phần tử nhập tệp, hãy xem open file dialog box in javascript. Nếu bạn đang tìm kiếm để lấy các tập tin liên kết với một nguyên tố tập tin đầu vào, bạn phải làm một cái gì đó như thế này:

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

Xem this MDN article để biết thêm về các loại FileList.

Lưu ý rằng mã ở trên sẽ chỉ hoạt động trong các trình duyệt hỗ trợ API tệp. Đối với IE9 và trước đó, ví dụ, bạn chỉ có quyền truy cập vào tên tệp. Phần tử đầu vào không có thuộc tính files trong các trình duyệt API không phải tệp.

+0

thx; nó hoạt động. –

Các vấn đề liên quan