HTML5, JavaScript: Kéo và Thả Tệp từ Cửa sổ Bên ngoài (Windows Explorer)

Question

Tôi có thể yêu cầu một ví dụ hoạt động tốt của Kéo và thả Tệp HTML5 triển khai không? Mã nguồn sẽ hoạt động nếu kéo và thả được thực hiện từ ứng dụng bên ngoài (Windows Explorer) đến cửa sổ trình duyệt. Nó sẽ hoạt động trên nhiều trình duyệt nhất có thể.

Tôi muốn yêu cầu mã mẫu có giải thích tốt. Tôi không muốn sử dụng thư viện của bên thứ ba, vì tôi sẽ cần sửa đổi mã theo nhu cầu của mình. Mã phải dựa trên HTML5 và JavaScript. Tôi không muốn sử dụng JQuery.

Tôi đã dành cả ngày để tìm kiếm nguồn tài liệu tốt, nhưng đáng ngạc nhiên là tôi không tìm thấy điều gì tốt. Các ví dụ mà tôi tìm thấy đã làm việc cho Mozilla nhưng không hoạt động cho Chrome.

Answer 1

liên kết này giải thích câu hỏi của tôi một cách chi tiết khá:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

Nhìn vào sự kiện ondragover. Bạn có thể chỉ đơn giản là có một bên trong của một div được ẩn cho đến khi sự kiện ondragover kích hoạt một hàm sẽ hiển thị div với nó, do đó cho phép người dùng kéo và thả tệp. Có một tuyên bố onchange trên sẽ cho phép bạn tự động gọi một chức năng (chẳng hạn như tải lên) khi một tập tin được thêm vào đầu vào. Đảm bảo rằng đầu vào cho phép nhiều tệp, vì bạn không kiểm soát được số lượng chúng sẽ thử và kéo vào trình duyệt.

Answer 3

Dưới đây là một ví dụ dead-đơn giản. Nó cho thấy một hình vuông màu đỏ. Nếu bạn kéo một hình ảnh trên hình vuông màu đỏ, nó sẽ gắn nó vào phần thân. Tôi đã xác nhận nó hoạt động trong IE11, Chrome 38 và Firefox 32. Xem bài viết Html5Rocks để có giải thích chi tiết hơn.

var dropZone = document.getElementById('dropZone'); 
 

 
// Optional. Show the copy icon when dragging over. Seems to only work for chrome. 
 
dropZone.addEventListener('dragover', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    e.dataTransfer.dropEffect = 'copy'; 
 
}); 
 

 
// Get file data on drop 
 
dropZone.addEventListener('drop', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    var files = e.dataTransfer.files; // Array of all files 
 

 
    for (var i=0, file; file=files[i]; i++) { 
 
     if (file.type.match(/image.*/)) { 
 
      var reader = new FileReader(); 
 

 
      reader.onload = function(e2) { 
 
       // finished reading file data. 
 
       var img = document.createElement('img'); 
 
       img.src= e2.target.result; 
 
       document.body.appendChild(img); 
 
      } 
 

 
      reader.readAsDataURL(file); // start reading the file data. 
 
     } 
 
    } 
 
});

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>