Trong JavaScript, bạn có thể khởi chạy hộp thoại trình duyệt tệp theo chương trình?

Question

Thay vì sử dụng thẻ <input type="file">, tôi muốn có nút khởi chạy hộp thoại trình duyệt tệp.

Suy nghĩ đầu tiên của tôi là có thẻ nhập tệp ẩn và nút. Tôi muốn sử dụng nút bấm vào nút để kích hoạt các onclick của đầu vào tập tin ẩn, nhưng tôi đã không thể có được điều này làm việc đúng cách.

Vì vậy, câu hỏi là, điều này thậm chí có thể? Và thứ hai là có một cách tốt hơn để làm điều này và vẫn có thể gửi thông tin trở lại trong một hình thức?

Đây sẽ là lớp dưới cùng của chức năng giảm cấp (từ Flash sang JavaScript (trang web của chúng tôi không hoạt động mà không có JS)) vì vậy nó chỉ hoạt động với JS và HTML cơ bản.

Answer 1

Có, có thể (ở hầu hết các trình duyệt) qua độ mờ. Here's a tutorial.

Answer 2

Tôi đã thực hiện việc này (xem câu trả lời của ceejayoz) trong quá khứ, nhưng bây giờ bạn nên chống lại nó. Đây là vấn đề an ninh và không thể dựa vào tương lai. Giải pháp tốt hơn là tăng dần biểu mẫu tải lên của bạn để đầu vào tệp được thay thế bằng trình tải lên dựa trên Flash hoặc Java với nhiều tính năng hơn (hoặc sử dụng các tính năng tốt hơn trong HTML 5 nếu chúng có sẵn).

Answer 3

Thay vì cố gắng hack kiểm soát nhập tệp của trình duyệt, tôi khuyên bạn nên sử dụng trình tải lên tệp dựa trên flash như SWFUpload. Tôi đã bắt đầu sử dụng điều này trong một trong các dự án của tôi và đã rất hài lòng với nó.

Bạn nhận được cuộc gọi lại javascript và bạn có thể làm bất cứ điều gì bạn muốn cho giao diện người dùng (đèn flash chỉ là chức năng tải lên).

Answer 4

Tôi muốn tránh các thủ thuật minh bạch hơn.

này đã làm việc cho tôi (sử dụng jQuery):

$("#upload-box").change(function(){ 
    $("#upload-click-handler").val($(this).val()); 
}); 
$("#upload-click-handler").click(function(){ 
    $("#upload-box").click(); 
}); 

Và HTML:

<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" /> 
<input id="upload-click-handler" type="text" readonly /> 

Nó tạo ra một đầu vào văn bản, và một đầu vào upload ẩn và các bản vá (= đường) các bấm vào đầu vào văn bản vào đầu vào tệp ẩn.

Khi tệp được chọn, tệp sẽ ghi lại tên tệp trong phần nhập văn bản, phù hợp với hầu hết những gì người dùng mong đợi từ giao diện.

Nên hoạt động trên FF, Chrome, IE9 và +. Tôi đã không kiểm tra nó trên IE8.

Đây là jsfiddle. Cảm ơn bạn đã upvoting câu trả lời của tôi nếu bạn thích nó.

Answer 5

Bạn có thể làm điều đó mà không gặp bất kỳ sự cố bảo mật nào. Chỉ cần mã trên onmouseenter sẽ thúc đẩy zindex của nút tải lên thực (bạn có thể sử dụng độ mờ trên nó hoặc làm cho nó trong suốt) và sau đó bạn sẽ không cần kích hoạt nhấp chuột mà chỉ cần sử dụng nhấp chuột từ người dùng.