ब्राउज़र को ड्रैग-एंड-गिराए गए फ़ाइल को लोड करने से रोकें

Question

मैं अपने पृष्ठ पर एक html5 ड्रैग और ड्रॉप अपलोडर जोड़ रहा हूं।

जब अपलोड क्षेत्र में कोई फ़ाइल गिरा दी जाती है, तो सबकुछ बढ़िया काम करता है।

हालांकि, अगर मैं अपलोड क्षेत्र के बाहर फ़ाइल को गलती से छोड़ देता हूं, तो ब्राउज़र स्थानीय फ़ाइल लोड करता है जैसे कि यह एक नया पृष्ठ है।

मैं इस व्यवहार को कैसे रोक सकता हूं?

धन्यवाद!

Answer 1

आप सभी ड्रैगओवर और ड्रॉप ईवेंट पर preventDefault() पर कॉल करने वाले विंडो में एक ईवेंट श्रोता जोड़ सकते हैं।
उदाहरण:

window.addEventListener("dragover",function(e){ 
    e = e || event; 
    e.preventDefault(); 
},false); 
window.addEventListener("drop",function(e){ 
    e = e || event; 
    e.preventDefault(); 
},false); 

Answer 2

इस प्रयास करें:

document.body.addEventListener('drop', function(e) { 
    e.preventDefault(); 
}, false); 

Answer 3

डिफ़ॉल्ट रूप से सभी खींचें और ड्रॉप आपरेशन की रोकथाम आप क्या चाहते हैं नहीं हो सकता है। यह जांचना संभव है कि ड्रैग स्रोत एक बाहरी फ़ाइल है, कम से कम कुछ ब्राउज़रों में। मैंने यह जांचने के लिए एक फ़ंक्शन शामिल किया है कि ड्रैग स्रोत इस StackOverflow answer में बाहरी फ़ाइल है या नहीं।

संशोधित डिजिटल विमान का जवाब है, तो आप कुछ इस तरह कर सकता है:

function isDragSourceExternalFile() { 
    // Defined here: 
    // https://stackoverflow.com/a/32044172/395461 
} 

window.addEventListener("dragover",function(e){ 
    e = e || event; 
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer); 
    if (IsFile) e.preventDefault(); 
},false); 
window.addEventListener("drop",function(e){ 
    e = e || event; 
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer); 
    if (IsFile) e.preventDefault(); 
},false); 

Answer 4

कुछ तत्वों पर केवल खींचें और ड्रॉप करने के लिए, आप की तरह कुछ कर सकते हैं:

window.addEventListener("dragover",function(e){ 
    e = e || event; 
    console.log(e); 
    if (e.target.tagName != "INPUT") { // check which element is our target 
    e.preventDefault(); 
    } 
},false); 
window.addEventListener("drop",function(e){ 
    e = e || event; 
    console.log(e); 
    if (e.target.tagName != "INPUT") { // check which element is our target 
    e.preventDefault(); 
    } 
},false); 

Answer 5

एक के बाद

var dropzoneId = "dropzone"; 
 

 
window.addEventListener("dragenter", function(e) { 
 
    if (e.target.id != dropzoneId) { 
 
    e.preventDefault(); 
 
    e.dataTransfer.effectAllowed = "none"; 
 
    e.dataTransfer.dropEffect = "none"; 
 
    } 
 
}, false); 
 

 
window.addEventListener("dragover", function(e) { 
 
    if (e.target.id != dropzoneId) { 
 
    e.preventDefault(); 
 
    e.dataTransfer.effectAllowed = "none"; 
 
    e.dataTransfer.dropEffect = "none"; 
 
    } 
 
}); 
 

 
window.addEventListener("drop", function(e) { 
 
    if (e.target.id != dropzoneId) { 
 
    e.preventDefault(); 
 
    e.dataTransfer.effectAllowed = "none"; 
 
    e.dataTransfer.dropEffect = "none"; 
 
    } 
 
});

<div id="dropzone">...</div>

: लगभग नगण्य की बहुत है, मैं इस stablest समाधान हो पाया

स्थापना दोनों effectAllow और dropEffect खिड़की स्वीकार करने के लिए नहीं किसी भी घ-एन-d किसी भी अब, भले ही गुण नया सेट कर रहे हैं या नहीं, मेरा ड्रॉप जोन का कारण बनता है बिना शर्त पर।

Answer 6

jQuery के लिए सही जवाब होगा:

$(document).on({ 
    dragover: function() { 
     return false; 
    }, 
    drop: function() { 
     return false; 
    } 
}); 

यहाँ return falseevent.preventDefault() और event.stopPropagation() के रूप में व्यवहार करेगा।

function preventDefaultExcept(predicates) { 
    return function (e) { 
    var passEvery = predicates.every(function (predicate) { return predicate(e); }) 
    if (!passEvery) { 
     e.preventDefault(); 
    } 
    }; 
} 

की तरह कहा जाता है:

Answer 7

, यहाँ "लक्ष्य जाँच" कुछ अन्य उत्तर में उल्लिखित विधि पर निर्माण करने के लिए एक अधिक सामान्य/कार्यात्मक विधि है

function isDropzone(e) { return e.target.id === 'dropzone'; } 
function isntParagraph(e) { return e.target.tagName !== 'p'; } 

window.addEventListener(
    'dragover', 
    preventDefaultExcept([isDropzone, isntParagraph]) 
); 
window.addEventListener(
    'drop', 
    preventDefaultExcept([isDropzone]) 
); 

Answer 8

मैं एक है एचटीएमएल object (embed) जो पृष्ठ की चौड़ाई और ऊंचाई को भरता है। @ डिजिटल-प्लेन द्वारा उत्तर सामान्य वेब पृष्ठों पर काम करता है लेकिन यदि उपयोगकर्ता एक एम्बेडेड ऑब्जेक्ट पर नहीं जाता है। तो मुझे एक अलग समाधान की जरूरत थी।

अगर हम event capture phase उपयोग करने से पहले एम्बेडेड वस्तु को प्राप्त हुए हम घटनाओं प्राप्त कर सकते हैं करने के लिए स्विच (घटना श्रोता कॉल के अंत में true मूल्य नोटिस):

// document.body or window 
document.body.addEventListener("dragover", function(e){ 
    e = e || event; 
    e.preventDefault(); 
    console.log("over true"); 
}, true); 

document.body.addEventListener("drop", function(e){ 
    e = e || event; 
    e.preventDefault(); 
    console.log("drop true"); 
}, true); 

निम्नलिखित कोड का उपयोग करना (आधारित पर @ डिजिटल विमान का जवाब) पेज एक खींचें निशाना बन जाती है, यह वस्तु की घटनाओं पर कब्जा करने से एम्बेड करता है और फिर हमारे छवियों को लोड करता है रोकता है:

document.body.addEventListener("dragover", function(e){ 
    e = e || event; 
    e.preventDefault(); 
    console.log("over true"); 
}, true); 

document.body.addEventListener("drop",function(e){ 
    e = e || event; 
    e.preventDefault(); 
    console.log("Drop true"); 

    // begin loading image data to pass to our embed 
    var droppedFiles = e.dataTransfer.files; 
    var fileReaders = {}; 
    var files = {}; 
    var reader; 

    for (var i = 0; i < droppedFiles.length; i++) { 
    files[i] = droppedFiles[i]; // bc file is ref is overwritten 
    console.log("File: " + files[i].name + " " + files[i].size); 
    reader = new FileReader(); 
    reader.file = files[i]; // bc loadend event has no file ref 

    reader.addEventListener("loadend", function (ev, loadedFile) { 
     var fileObject = {}; 
     var currentReader = ev.target; 

     loadedFile = currentReader.file; 
     console.log("File loaded:" + loadedFile.name); 
     fileObject.dataURI = currentReader.result; 
     fileObject.name = loadedFile.name; 
     fileObject.type = loadedFile.type; 
     // call function on embed and pass file object 
    }); 

    reader.readAsDataURL(files[i]); 
    } 

}, true); 

मैक पर फ़ायरफ़ॉक्स पर परीक्षण किया गया।