ब्राउज़र में फ़ाइल अटैचमेंट को कैसे खींचें और छोड़ें?

Question

ऐसा लगता है कि जीमेल सिर्फ इस सुविधा को शुरू कर रहा है, और इसके लिए आपको कोई प्लगइन इत्यादि स्थापित करने की आवश्यकता नहीं है।

यह फ़ायरफ़ॉक्स और क्रोम दोनों में काम करता है लेकिन आईई नहीं।

Answer 1

यह HTML5 ड्रैग और ड्रॉप एपीआई का उपयोग कर रहा है।

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

Answer 2

वे एचटीएमएल 5 की सुविधाओं में से एक का उपयोग कर रहे

। आईई एचटीएमएल 5 या मानकों का समर्थन नहीं करता है या ...

Here is a blog जो ड्रैग और उचित रूप से अच्छी तरह से ड्रॉप करता है।

Answer 3

एचटीएमएल 5 ड्रैग और ड्रॉप एपीआई रक्तस्राव-किनारे वाले ब्राउज़र में उपलब्ध है जैसे अन्य ने कहा।

Google Gears (एक "प्लगइन") पुराने ब्राउज़रों (एफएफ और आईई) के लिए ड्रैग'ड्रॉप कार्यक्षमता (मुझे पता है कि Google Wave कम से कम Google Wave dev पूर्वावलोकन में गियर का उपयोग करता है) जोड़ सकता है। ध्यान दें कि gears will not be supported forever

Answer 4

मुझे लगता है कि आप इस http://www.plupload.com/

Answer 5

उपयोग dropzonejs के लिए देख रहे हैं।

यह तत्व बनाने के लिए dropzone कक्षा को जोड़कर फ़ाइल बूंदों का समर्थन करने वाली हल्की लाइब्रेरी है। यह एचटीएमएल 5 के साथ फाइलों को संभालता है और इसमें छवियों के पूर्वावलोकन भी दिखाए जाते हैं। असंगत ब्राउज़रों में यह एक साधारण फ़ाइल अपलोड फॉर्म पर वापस आ जाता है। यह भी: यह अच्छा लग रहा है।

इसे देखें!

अस्वीकरण: मैंने इस पुस्तकालय को लिखा था। जब आप खींचें

Answer 6

के एक उदाहरण यहाँ संक्षेप में प्रस्तुत करने से पहले उन सभी लिंक को तोड़ने चलो =)

और HTML5 DnD API, एक फ़ाइल के साथ छोड़ ब्राउज़र में अपने डेस्कटॉप/फ़ाइल ब्राउज़र फार्म:

• drop घटना कॉलबैक वस्तु एक dataTransfer.files संपत्ति
• जो एक HTML5 File APIFileList वस्तु
0 है
• जिसमें फ़ाइल एपीआई File ऑब्जेक्ट्स शामिल हैं।

वहां से, अपलोड करने के लिए फ़ाइल एपीआई का उपयोग करें, जो पहले से ही कई अन्य स्थानों में शामिल हो चुका है।

पूर्ण उदाहरण:

<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।

यह फ़ाइल बेसनाम को रूट करेगा (पथ फ़ाइल एपीआई से प्राप्त नहीं किया जा सकता है)।

बीटीडब्ल्यू, File ऑब्जेक्ट प्राप्त करने का दूसरा मूल तरीका .filesinput type=file की आईडीएल विशेषता के माध्यम से है। यह विधि डीएनडी की तुलना में छोटी स्क्रीन के लिए अधिक अनुकूल है, जहां आपको अच्छी सापेक्ष स्थिति में एक ही समय में दो खिड़कियां खोलने की आवश्यकता होती है। दुर्भाग्य से, ऐसा लगता है एक input type=file में है कि वर्तमान में यह ड्रैग और ड्रॉप करने के लिए पोर्टेबल नहीं है: drag drop files into standard html file input

स्रोत: http://www.html5rocks.com/en/tutorials/file/dndfiles/