Làm cách nào để kéo và thả tệp đính kèm vào trình duyệt?

Question

Dường như Gmail chỉ mới bắt đầu tính năng này và không yêu cầu bạn cài đặt bất kỳ plugin nào, v.v.

Nó hoạt động trong cả Firefox và Chrome nhưng không phải IE.

Answer 1

Nó đang sử dụng API kéo và thả HTML5.

http://html5doctor.com/native-drag-and-drop/

Answer 2

Họ đang sử dụng một trong các tính năng HTML5 của. IE không hỗ trợ HTML 5 hoặc các tiêu chuẩn hoặc ...

Here is a blog giải thích việc kéo và thả hợp lý tốt.

Answer 3

API kéo và thả HTML5 có sẵn trong các trình duyệt xuất hiện như các trình duyệt khác.

Google Gears (một "plugin") có thể thêm chức năng drag'n'drop (Tôi biết Google Wave sử dụng các bánh răng ít nhất trong bản xem trước Google Wave) cho các trình duyệt cũ hơn (FF và IE). Lưu ý rằng gears will not be supported forever

Answer 4

Tôi cho rằng bạn đang tìm kiếm này http://www.plupload.com/

Answer 5

Sử dụng dropzonejs.

Thư viện nhẹ hỗ trợ tệp tin giảm xuống bằng cách thêm lớp dropzone vào phần tử biểu mẫu. Nó xử lý các tập tin với HTML5 và thậm chí hiển thị xem trước các hình ảnh rơi vào nó. Trong các trình duyệt không tương thích, nó rơi trở lại một hình thức tải lên tệp đơn giản. Ngoài ra: nó có vẻ tốt.

Hãy xem qua!

Tuyên bố từ chối trách nhiệm: Tôi đã viết thư viện này.

Answer 6

Hãy tóm tắt một ví dụ ở đây trước khi tất cả các liên kết này phá vỡ =)

Khi bạn kéo và thả với HTML5 DnD API, một file hình trình duyệt máy tính để bàn/tập tin của bạn vào trình duyệt:

• đối tượng gọi lại sự kiện drop có thuộc tính dataTransfer.files
• là HTML5 File APIFileList đối tượng
• chứa các API đối tượng File.

Từ đó, hãy sử dụng API tệp để tải lên, đã được bao phủ ở nhiều nơi khác.

Full dụ:

<div id="file-drop" style="border:1px dashed black; height:300px; width:300px;">Drop files here!</div> 
<script> 
    var file_drop = document.getElementById('file-drop'); 
    file_drop.addEventListener(
    'dragover', 
    function handleDragOver(evt) { 
     evt.stopPropagation() 
     evt.preventDefault() 
     evt.dataTransfer.dropEffect = 'copy' 
    }, 
    false 
) 
    file_drop.addEventListener(
    'drop', 
    function(evt) { 
     evt.stopPropagation() 
     evt.preventDefault() 
     var files = evt.dataTransfer.files // FileList object. 
     var file = files[0]     // File  object. 
     alert(file.name) 
    }, 
    false 
) 
</script> 

Fiddle.

Điều này sẽ cảnh báo tên tệp cơ sở (đường dẫn không thể lấy được từ API tệp).

BTW, cách cơ bản khác mà bạn có thể nhận được đối tượng File là thông qua thuộc tính .files IDL của số input type=file. Phương pháp này thân thiện hơn cho màn hình nhỏ hơn so với DnD, nơi bạn cần hai cửa sổ mở cùng một lúc ở vị trí tương đối tốt. Thật không may, có vẻ như rằng hiện tại không phải là cầm tay để kéo và thả vào một input type=file: drag drop files into standard html file input

Nguồn: http://www.html5rocks.com/en/tutorials/file/dndfiles/