एचटीएमएल 5 खींचें और ड्रॉप करें: जावास्क्रिप्ट

Question

के साथ टेक्स्टबॉक्स में टेक्स्ट फ़ाइल लोड करें, मैं उपयोगकर्ताओं को अपने कंप्यूटर से फ़ाइल खींचने और छोड़ने (या चुनने) की अनुमति देना चाहता हूं और इसे जावास्क्रिप्ट के साथ टेक्स्टबॉक्स में लोड करना चाहता हूं।

क्या जावास्क्रिप्ट के साथ एक स्थानीय फ़ाइल को टेक्स्टबॉक्स में लोड करना संभव है? यदि हां, तो कैसे?

Answer 1

मैं सब कुछ आप एचटीएमएल 5 के लिए चाहते हो जाएगा में शामिल है लगता है Github पर remy/html5demos।

उदाहरण के तौर पर, मैंने टेक्स्ट फ़ाइलों को स्वीकार करने और उन्हें ब्राउज़र में प्रदर्शित करने के लिए http://html5demos.com/file-api संशोधित किया।

jsfiddle देखें।

संपादित
प्रासंगिक स्क्रिप्ट:

// modified from http://html5demos.com/file-api 
var holder = document.getElementById('holder'), 
    state = document.getElementById('status'); 

if (typeof window.FileReader === 'undefined') { 
    state.className = 'fail'; 
} else { 
    state.className = 'success'; 
    state.innerHTML = 'File API & FileReader available'; 
} 

holder.ondragover = function() { 
    this.className = 'hover'; 
    return false; 
}; 
holder.ondragend = function() { 
    this.className = ''; 
    return false; 
}; 
holder.ondrop = function(e) { 
    this.className = ''; 
    e.preventDefault(); 

    var file = e.dataTransfer.files[0], 
     reader = new FileReader(); 
    reader.onload = function(event) { 
     console.log(event.target); 
     holder.innerText = event.target.result; 
    }; 
    console.log(file); 
    reader.readAsText(file); 

    return false; 
};​ 

Answer 2

चेक बाहर HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/

कल्पना भी यह कैसे काम करता की एक विचार प्राप्त करने के लिए एक अच्छा उदाहरण है:

http://dev.w3.org/2006/webapi/FileAPI/#introduction