Sự kiện kéo và thả tệp trong jquery

Question

Tôi đang cố gắng tìm cách cho phép người dùng kéo và thả từng tệp vào một khu vực trên trang của mình, sau đó có thể gửi cùng với tất cả dữ liệu biểu mẫu khác của tôi.

Trong nghiên cứu của mình, tôi đã tìm thấy nhiều tập lệnh tải lên "kéo và thả" nhưng tất cả đều hoạt động, cách quá nhiều. Tôi muốn xử lý việc tải lên thực tế bản thân và chỉ cung cấp cách để người dùng tải tệp lên mà không cần nhấn nút duyệt.

Có sự kiện nào trong jquery (hoặc thứ gì đó tương tự) mà tôi nên tìm kiếm không?

Bất kỳ trợ giúp nào được đánh giá cao!

Answer 1

Plupload là một plugin jQuery để tải lên nhiều tệp và có tính năng kéo/thả HTML 5 từ máy tính để bàn được hỗ trợ. Nó dễ dàng để cấu hình, kiểm tra http://www.plupload.com/example_queuewidget.php

Nếu bạn không muốn chức năng tải lên, hãy kiểm tra như sau:

(Kéo và thả từ máy tính và lưu trữ vào lưu trữ địa phương) http://jsdo.it/hirose31/7vBK

(jQuery FileDrop - HTML5 Drag 'n Drop tập tin) https://github.com/weixiyen/jquery-filedrop

(HTML5) http://www.html5rocks.com/en/features/file, http://xquerywebappdev.wordpress.com/2010/05/21/drag-n-drop-from-desktop-jquery-plugin/

Answer 2

Tôi đã xem qua câu hỏi này trong khi nghiên cứu một số kỹ thuật tải lên tệp AJAX.

Tôi tạo ra một kéo và thả tải lên kịch bản ngày hôm nay (nó vẫn còn trong bằng chứng của giai đoạn khái niệm nhưng heres các bước cơ bản mà tôi đã diễn.

$('drag-target-selector').on('drop', function(event) { 

//stop the browser from opening the file 
event.preventDefault(); 

//Now we need to get the files that were dropped 
//The normal method would be to use event.dataTransfer.files 
//but as jquery creates its own event object you ave to access 
//the browser even through originalEvent. which looks like this 
var files = event.originalEvent.dataTransfer.files; 

//Use FormData to send the files 
var formData = new FormData(); 

//append the files to the formData object 
//if you are using multiple attribute you would loop through 
//but for this example i will skip that 
formData.append('files', files[0]); 

} 

bây giờ bạn có thể gửi formData để được xử lý bởi một kịch bản php hoặc bất cứ điều gì khác bạn muốn sử dụng Tôi không sử dụng jquery trong kịch bản của tôi như có rất nhiều vấn đề với nó nó có vẻ dễ dàng hơn để sử dụng xhr thường xuyên. Đây là mã số

var xhr = new XMLHttpRequest(); 
    xhr.open('POST', 'upload.php'); 
    xhr.onload = function() { 
      console.log(xhr.responseText); 

    }; 


    xhr.upload.onprogress = function(event) { 
      if (event.lengthComputable) { 
        var complete = (event.loaded/event.total * 100 | 0); 
        //updates a <progress> tag to show upload progress 
        $('progress').val(complete); 

      } 
    }; 

xhr.send(formData);