फाइल सिस्टम से वेब अनुप्रयोग में खींचें

Question

मैं एक वेब फ्रेमवर्क/टेक्नो पर जांच कर रहा हूं जो फ़ाइलों को सिस्टम सिस्टम से एन ड्रॉप फ़ाइलों को खींचने की अनुमति देता है। उद्देश्य उन फ़ाइलों को एक एप्लिकेशन सर्वर में अपलोड करना है।

फ्लेक्स में ऐसा संभव नहीं है (हालांकि यह एआईआर के साथ काम करता है)। मुझे Google गियर्स के साथ एक रास्ता मिला है, लेकिन यह उपयोगकर्ता को ब्राउज़र प्लगइन के रूप में गियर्स इंस्टॉल करने के लिए मजबूर करता है।

जावा एप्लेट के साथ, ऐसा लगता है लेकिन उपयोगकर्ता को सुरक्षा नियम अपवाद स्वीकार करने की आवश्यकता है ... (यह मेरे लिए अजीब है क्योंकि उपयोगकर्ता द्वारा निर्दिष्ट फ़ाइल को डीएनडी के माध्यम से निर्दिष्ट करना "कम सुरक्षित" नहीं है यदि उपयोगकर्ता ने मानक शास्त्रीय अपलोड संवाद बॉक्स के माध्यम से फ़ाइल निर्दिष्ट की है ...)।

क्या इस सुविधा को अनुमति देने के लिए कोई प्लगइन स्थापित करने के बिना और कोई सुरक्षा चेतावनी संदेश बॉक्स स्वीकार किए बिना कोई गैर घुसपैठ करने का तरीका है?

Answer 1

सं

ब्राउज़र आम तौर पर में बनाया बात की इस तरह के लिए समर्थन की जरूरत नहीं है।

Answer 2

Firefox 3.6 और जाहिरा तौर पर नवीनतम सफारी (शायद वेबकिट रात) एचटीएमएल 5 के माध्यम से इस समर्थन करते हैं। मैं हाल ही में इसके साथ खेल रहा हूं और यह बहुत अच्छी तरह से काम करता है। उदाहरण मैंने केवल पृष्ठ में थंबनेल डाले हैं, लेकिन इसे सर्वर पर डेटा अपलोड करने के लिए समायोजित किया जा सकता है। यहाँ जावास्क्रिप्ट/jQuery कोड मैंने लिखा है, इस का उपयोग करने के लिए स्वतंत्र महसूस:

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/>"); 
    }) 

}); 

और यह के लिए HTML:

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

Answer 3

यह अब एचटीएमएल 5 File API के उपयोग के माध्यम से संभव है।

• कई टर्नकी समाधान/उदाहरण:
  • http://www.freshdesignweb.com/jquery-html5-file-upload.html
• & आसान तो जल्दी करने के लिए एक पुस्तकालय:
  • https://code.google.com/p/html5uploader/
• एक और अधिक तकनीकी ट्यूटोरियल यहाँ उपलब्ध है :
  • http://www.sitepoint.com/html5-file-drag-and-drop/ (demo)

यह भी drag & drop folders करना संभव है।