2012-01-12 27 views
7

Tôi đã có một bài ở đây:IE9 tập tin đầu vào kích hoạt sử dụng Javascript

.change acting weird in IE9

Tuy nhiên, tôi đã chạy vào một vụ việc mới liên quan đến việc xử lý hình thức upload file và tò mò nếu ai đã chạy vào vấn đề này .

Vấn đề ban đầu của tôi là tôi không thể có sự kiện onchange để làm việc và tôi nghĩ có lẽ đó là vấn đề với javascript của tôi, nhưng tôi thấy rằng nó phải làm với cách biểu mẫu đang được kích hoạt.

Tôi có một tập tin đầu vào

<input type="file" name="abc"/> 

bây giờ tôi đã thực hiện 2 điều.

Tôi đã ẩn đầu vào và tạo nút (để kiểm soát kiểu tóc tốt hơn) kích hoạt đầu vào.

<button id="mybutton">click to upload a pic</button> 
<input type="file" name="abc"/> 

và sau đó là JS cho sự tương tác giữa hai:

$("#mybutton").click(function() { 
    $("Input[type=file]").click() 
}; 

và dĩ nhiên một nộp đối với hình thức (i sử dụng cha mẹ trong ví dụ này, nhưng bạn trong mã thực tế của tôi, tôi sử dụng id biểu mẫu).

$("input[type=file]").change(function() { 
    $(this).parent().submit(); 
}); 

Khi tôi nhấp vào "mybutton", kết quả mong đợi sẽ xảy ra khi cửa sổ duyệt của tôi mở và cho phép tôi chọn tệp từ máy tính của mình. Ngoài ra khi tôi thay đổi tệp trong tất cả các trình duyệt khác ngoài IE, sự kiện onchange được kích hoạt. Bây giờ nếu tôi bỏ ẩn biểu mẫu và nhấp vào nút "duyệt" theo cách thủ công và chọn tệp, sự kiện onchange sẽ được kích hoạt. Vì vậy, về cơ bản trình duyệt xử lý việc nhấp vào nút tệp thực tế khác với việc thực hiện $ ("đầu vào [loại = tệp]").()

bất kỳ ai biết cách sửa lỗi này?

Trả lời

33

Như đã nói ở trên, IE rất nghiêm ngặt khi gửi biểu mẫu chứa tệp inp uts. Đầu vào tệp phải được kích hoạt bằng nhấp chuột thực để cho phép gửi biểu mẫu. Ngoài ra, có vẻ như là một lỗi với IE9 và đầu vào tệp.

Các tin tốt là có một cách để vượt qua những hạn chế bảo mật từ trình duyệt IE sử dụng một nhãn:

  1. Tạo một thẻ nhãn thường xuyên liên quan đến đầu vào tập tin của bạn. Nhãn sẽ kích hoạt tệp đầu vào như bình thường.
  2. Che giấu nhãn làm nút bằng cách sử dụng CSS.
  3. Đầu vào tệp phải được hiển thị (đối với IE8), nhưng có thể bị ẩn bằng cách sử dụng "mức độ hiển thị: ẩn". IE8 sẽ chấp nhận hack này.
+1

Người đàn ông này hoạt động tốt, đó là những gì tôi đang tìm kiếm! Tôi đã thử rất nhiều phương pháp khác trong IE 9 nhưng chỉ làm việc này! – Daniel

+0

@A. Clement Cảm ơn điều này thực sự đã cứu tôi! –

+0

IMHO này đáng lẽ phải là câu trả lời! –

2

Nếu tôi không nhầm lẫn, bạn không thể thay đổi điều này vì điều này (ban đầu) có nghĩa là bảo vệ quyền riêng tư của người dùng tránh tải lên tệp mà không có sự cho phép/hành động của người dùng rõ ràng.

+1

ah ic ... cũng là giải pháp mà tôi đã thấy là lấy trường nhập và tạo kiểu cho kích thước cho nút giả và ẩn nút đó phía trên nút (để người dùng cho rằng họ đang nhấp vào nhưng họ thực sự nhấp vào biểu mẫu). Nó chỉ là verrrrry xấu xí và rất nhiều CSS không hài lòng để đối phó với ... – Brodie

+0

Tôi đoán bạn có thể sử dụng đèn flash là tốt! Tôi nghĩ rằng đây là những gì hầu hết mọi người như Gmail ... đang sử dụng. – Ali

0
  1. chắc chắn rằng mã của bạn là trong $("document").ready(function(){... here..});

  2. dường như đầu vào tập tin khi dây với .live("change", function(){}); dont khá làm việc tốt

những thứ phong cách khác là cái gì khác nhưng CSS isn' t tất cả những điều phức tạp - beautiful file upload

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