मुझे विश्वास है कि Na7coldwater सही है। event.clipboardData का उपयोग किया जा रहा है। कृपया अवधारणा के निम्न सबूत देखें:
<html>
<body>
<div id="rte" contenteditable="true" style="height: 100%; width: 100%; outline: 0; overflow: auto"></div>
<script type="text/javascript">
document.getElementById("rte").focus();
document.body.addEventListener("paste", function(e) {
for (var i = 0; i < e.clipboardData.items.length; i++) {
if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") {
// get the blob
var imageFile = e.clipboardData.items[i].getAsFile();
// read the blob as a data URL
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
// create an image
var image = document.createElement("IMG");
image.src = this.result;
// insert the image
var range = window.getSelection().getRangeAt(0);
range.insertNode(image);
range.collapse(false);
// set the selection to after the image
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
};
// TODO: Error Handling!
// fileReader.onerror = ...
fileReader.readAsDataURL(imageFile);
// prevent the default paste action
e.preventDefault();
// only paste 1 image at a time
break;
}
}
});
</script>
</body>
जीमेल बजाय XMLHttpRequest के माध्यम से छवि अपलोड करता है एक डेटा यूआरएल के रूप में सीधे एम्बेड की। ड्रैग & ड्रॉप फ़ाइल अपलोड के लिए Google या SO पर एक खोज से पता चलता है कि यह कैसे प्राप्त किया जा सकता है।
कृपया ध्यान रखें कि यह अवधारणा का प्रमाण है। त्रुटि प्रबंधन और ब्राउज़र/सुविधा पहचान कोड शामिल नहीं है।
आशा है कि इससे मदद मिलती है!
स्रोत
2011-06-27 14:14:28
http://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-java-script/4400761#4400761 फ़ायरफ़ॉक्स (और शायद क्रोम) छवियों को डेटा के साथ '' टैग के रूप में चिपकाता है यूआरआई के रूप में href। मुझे नहीं पता कि जीमेल हालांकि यह कैसे कर रहा है। शायद 'event.clipboardData' के साथ। –
Na7coldwater