Kéo thả n từ hệ thống tập tin vào ứng dụng web

Question

Tôi đang nghiên cứu trên một khung công tác web/kỹ thuật cho phép kéo n thả tệp từ hệ thống tệp vào ứng dụng web. Mục đích của khóa học là tải các tệp đó lên máy chủ ứng dụng.

Trong Flex có vẻ như không thể thực hiện được (mặc dù nó hoạt động với AIR). Tôi đã tìm thấy một cách với Google Gears, nhưng điều này buộc người dùng phải cài đặt Gears làm plugin trình duyệt.

Với một ứng dụng Java, có vẻ như có thể nhưng nó yêu cầu người dùng chấp nhận ngoại lệ quy tắc bảo mật ... (thật lạ khi đọc tệp do người dùng chỉ định qua DnD không "kém an toàn" hơn nếu người dùng đã chỉ định tệp thông qua hộp thoại Tải lên điển hình chuẩn ...).

Có cách nào không xâm nhập để cho phép tính năng này, không cài đặt bất kỳ plugin nào và không chấp nhận hộp thông báo cảnh báo bảo mật không?

Answer 1

số

Trình duyệt không thường có hỗ trợ cho các loại điều này được xây dựng trong.

Answer 2

Firefox 3.6 và rõ ràng nhất là Safari (có thể Webkit đêm) hỗ trợ này thông qua HTML5. Tôi đã chơi với nó gần đây và nó hoạt động khá tốt. Ví dụ tôi đã thực hiện chỉ chèn hình thu nhỏ vào trang, nhưng điều này có thể được điều chỉnh để tải dữ liệu lên máy chủ. Dưới đây là các mã JavaScript/jquery tôi đã viết, cảm thấy tự do để sử dụng này:

function debug(string) { 
    $("#debugArea").append(string); 
} 

$(function() { 
    // We need to override the dragover event, otherwise Firefox will just open the file on drop 
    $("#dropArea").bind("dragover", function(event) { 
    event.preventDefault(); 
    }); 

    // This is where the actual magic happens :) 
    $("#dropArea").bind("drop", function(event) { 
    event.preventDefault(); 
    debug("Dropped something: "); 
    // Since jquery returns its own event object, we need to get the original one in order to access the files 
    var files = event.originalEvent.dataTransfer.files; 
    // jquery nicely loops for us over the files 
    $(files).each(function(index, file) { 
    if(!file.type.match(/image.*/)) { // Skip non-images 
     debug(file.name) 
     debug(" <em>not an image, skipping</em>; "); 
     return; 
     } 

     // We need a new filereader for every file, otherwise the reading might be canceled by the next file 
     var filereader = new FileReader(); 
     filereader.onloadend = function(event) { $("#thumbnails").append("<img src='"+event.target.result+"' width='100px' />"); }; 
     debug(file.name); 
     debug("; "); 

     // Read the file in data URL format so that we can easily add it to an img tag. 
     filereader.readAsDataURL(file); 
    }); 
    debug("<br/><br/>"); 
    }) 

}); 

Và HTML cho nó:

<div id="dropArea"> 
    <p>Drop images here!</p> 
</div> 
<div id="thumbnails"> 
</div> 
<div id="debugArea"> 
    <strong>Debug Info:</strong><br/> 
</div> 

Answer 3

này bây giờ là có thể thông qua việc sử dụng HTML5 File API.

• Nhiều giải pháp chìa khóa trao tay/ví dụ:
  • http://www.freshdesignweb.com/jquery-html5-file-upload.html
• Một thư viện để làm như vậy nhanh chóng & dễ dàng:
  • https://code.google.com/p/html5uploader/
• Một hướng dẫn kỹ thuật có sẵn ở đây :
  • http://www.sitepoint.com/html5-file-drag-and-drop/ (demo)

Nó thậm chí có thể drag & drop folders.