Tắt thao tác kéo hình ảnh hệ thống tệp vào trình duyệt.

Question

Tôi đang thử nghiệm với API tệp HTML5. Tuy nhiên, tôi nhận thấy rằng các trình duyệt có hành vi mặc định khi chúng hiển thị hình ảnh nếu bạn kéo hình ảnh vào trình duyệt. Tuy nhiên, điều này có thể gây phiền nhiễu nếu mục tiêu của bạn là tải lên hình ảnh thay vì xem nó.

Tôi tự hỏi liệu có cách nào ngăn chặn hành vi này không? Tôi đã thử stopPropagation/preventDefault trên một sự kiện ondrop hoạt động một phần, tuy nhiên để con trỏ "thả" tại chỗ cho ấn tượng rằng hình ảnh có thể bị bỏ bất cứ nơi nào trên trang.

Lý tưởng nhất là bạn sẽ chỉ thấy con trỏ "thả" trên khu vực được chỉ định nơi hình ảnh có nghĩa là bị bỏ.

Answer 1

Đối tượng dataTransfer có tính dropEffect và effectAllowed. Không chắc chắn chính xác sự khác biệt giữa chúng, nhưng đặt cả hai thành 'none' sẽ giúp ích.

$(document).bind({ 
    dragenter: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
    dt.effectAllowed = dt.dropEffect = 'none'; 
    }, 
    dragover: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
     dt.effectAllowed = dt.dropEffect = 'none'; 
    } 
}); 

Xem chỉ http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - chỉ được thả vào hình chữ nhật.

Answer 2

Có lẽ đây là những gì bạn đang tìm kiếm? Tôi tự thiết kế nó.

http://rightandrong.info/html5upload/Upload.html