Je veux que les fichiers texte abandonnés soient affichés par leur contenu ou leur emplacement complet afin que je puisse charger des contenus de cet emplacement dans le "Drop_Zone".
C'est ce que j'ai jusqu'à présent. J'étais juste en mesure d'accéder au nom de fichier:
3 Réponses :
http://www.html5rocks.com/fr/Tutorials/file/dndfiles/ devrait être une bonne ressource. Vous devez utiliser une FileReader pour lire le contenu du fichier sous forme de chaîne.
En raison des limites de sécurité, une page n'est pas en mesure de charger des matières de fichiers sans quelque chose comme un applet Java configuré avec des autorisations appropriées; Et, même alors, ce n'est pas trop possible.
Cependant, cela ne veut pas dire que c'est impossible; Téléchargez simplement le fichier sur un serveur et echo le contenu de votre navigateur sur le navigateur. C'est le nombre de fonctions d'applications Web de type texte de type texte.
Comment vous implémentez ceci est à vous.
En outre, comme Maz a souligné, vous pouvez également utiliser des API intégrées pour vous aider à faire ce que vous essayez de faire. Notez cependant cette solution n'est pas nécessairement compatible avec un navigateur croisé.
Voici le code final:
<html>
<head>
<title></title>
</head>
<body>
<textarea id="drop_zone">Drop files here</textarea>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById('drop_zone').value = event.target.result;
}
reader.readAsText(files[0],"UTF-8");
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>
Cela fonctionne en chrome mais pas dans IE11? Une solution de contournement?