Téléchargement de fichier glisser-déposer dans Google Chrome / Chrome et Safari?
le téléchargement de fichiers glisser-déposer peut être fait dans Firefox 3.6.
une recherche sur Google pour HTML5 téléchargement de fichiers glisser-déposer-gmail donne des choses comme:
- Native Glisser + Chute d'upload de fichier dans Firefox 3.6
- http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
- http://www.thecssninja.com/javascript/drag-and-drop-upload
tous ces guides utilisent FileReader (ou le Firefox 3.6 déprécié getAsBinary , qu'aucun autre navigateur ne supporte, soit).
cependant, Google a récemment publié une mise à jour pour Gmail qui a permis de glisser-déposer Fichier téléchargement dans Chrome ainsi que Firefox, et Chrome n'a pas FileReader . Je suis en utilisant la dernière Chrome nightly, et il peut glisser-déposer des fichiers de téléchargement, tout en ne supportant pas FileReader .
j'ai vu quelqu'un mentionner que drag-drop uploading peut être possible en traînant sur un <input type="file" /> , mais qui ne peut prendre en charge qu'un fichier à la fois, tandis que le uploader de Gmail peut gérer plusieurs fichiers traînés sur elle, de sorte que ce n'est clairement pas ce qu'ils font.
donc la question Est, comment font-ils? Comment prendre en charge le Chrome pour HTML5 téléchargement du fichier? En outre, pouvez-vous soutenir Safari?
9 réponses
avertissement: code de compatibilité pour les très anciennes versions de Safari et Chrome. les navigateurs modernes prennent tous en charge L'API FileReader; voici un tutoriel: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
Ce code n'est utile que si pour une raison quelconque vous avez besoin de soutien Safari 5 et plus, ou de Chrome 6 et plus.
Un la possibilité est d'utiliser la méthode utilisée dans SwellJS :
Utiliser <input type="file" multiple="multiple" /> comme suit:
<form method="post" enctype="multipart/form-data" id="uploadform">
<input type="file" name="dragupload[]" multiple="multiple"
onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>
l'élément d'entrée peut avoir le style opacity: 0 et être positionné (absolument) sur un élément qui accepte les téléchargements. Le formulaire entier peut être placé dans un iframe pour "pseudo-Ajax" comme le comportement. Et l'élément de téléchargement peut être une couche cachée jusqu'à ce que quelque chose soit traîné au-dessus.
tel une iframe ressemblerait à:
<script>
<!--
var entered = 0;
-->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
<form method="post" enctype="multipart/form-data" id="uploadform">
Things can be dragged and dropped here!
<input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
</form>
</body>
ceci ne doit être fait que lorsque Safari ou Chrome est détecté (puisque les autres navigateurs ne prennent pas en charge la glissade-and-drop sur les éléments <input type="file" /> ), et peut être utilisé en combinaison avec L'événement HTML5 drop pour Firefox 3.6+.
Je ne peux pas dire si C'est la méthode utilisée par Gmail, mais elle fonctionne certainement aussi bien.
vous pourriez être intéressé par quelque chose de plus technologique - et conforme au navigateur.
me semble que Plupload le fait bien, en supportant les caractéristiques suivantes:
- Chunking
- Glisser/Déposer
- PNG Resize
- JPEG Resize
- type filtrage
- Stream télécharger
- Multipart télécharger
- restriction relative à la taille des fichiers
- Télécharger le progrès
pour la plupart des technologies suivantes:
- Flash
- engrenages
- HTML 5
- Silverlight
- BrowserPlus
et oui, depuis 2010.05.27 , il prend en charge le drag/drop pour HTML5 tournant sur Chrome beta.
J'ai quelque chose qui fonctionne dans Chrome après beaucoup, beaucoup, beaucoup de travail de détective. Ce seulement fonctionne sur Chrome. Au Safari, il gèle. Sur Firefox, Je ne peux pas laisser tomber le fichier. IE ouvre le fichier abandonné à la place. Même dans Chrome, le drag and drop ne fonctionne qu'une seule fois, pour une raison inconnue, après quoi vous devez rafraîchir la page. (Une raison possible à cela est que quelque chose est incorrect avec les gestionnaires d'événements.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById('div');
div.ondragenter = div.ondragover = function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
return false;
}
div.ondrop = function (e) {
for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
var file = e.dataTransfer.files[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File)
var xhr = new XMLHttpRequest;
xhr.open('post', 'handler.php', true);
xhr.onreadystatechange = function () {
if (this.readyState != 4)
return;
document.body.innerHTML += '<pre>' + this.responseText + '</pre>';
}
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.setRequestHeader('X-File-Name', file.fileName);
xhr.setRequestHeader('X-File-Size', file.fileSize);
xhr.send(file); // For some reason sending the actual File object in Chrome works?
}
e.preventDefault();
return false;
}
}
</script>
</head>
<body>
<div id="div" style="width: 100%; height: 200px; border: 1px solid blue">Drop here</div>
</body>
</html>
gestionnaire.php:
// This is not a true file upload. Instead, it sends the raw data directly.
echo htmlentities(file_get_contents('php://input'));
vous n'auriez pas besoin d'utiliser une iframe pour faire un téléchargement de pseudo ajax. Chrome et Safari prennent tous les deux en charge xhr2 télécharge avec des événements progressifs afin que vous puissiez faire des barres de progrès, etc.
pour notre propre application, nous faisons glisser-déposer pour FireFox seulement. Nous revenons au téléchargement iframe traditionnel pour les autres. Afin de détecter que le drag and drop est supporté, nous exécutons ce code:
if (typeof(window.File) == 'object' && typeof(window.FileReader) == 'function' && typeof(window.FileList) == 'object') {
// DnD is supported!
}
en espérant que cela sera utile à certains.
vous pouvez utiliser la bibliothèque html5uploader: http://code.google.com/p/html5uploader/
il fonctionne avec Firefox, Safari et Chrome.
le dernier fichier de support de navigateur bien télécharger. Vous pouvez utiliser:
xhr = new XMLHttpRequest();
xhr.open('POST', targetPHP, true);
var formData = new FormData();
formData.append('upload',file);
xhr.send(formData);
vous n'avez pas besoin de mettre des limites ou n'importe quelle tête փ tout comme cela, il fonctionne très bien. J'ai testé ce code dans client: firefox 6.02 et dans chrome 13. serveur: tomcat avec "spring mvc"
vous pouvez utiliser FormData pour stocker le fichier, puis le télécharger. E. g
function setUp(){
var dropContainer = document.getElementById("container");
dropContainer.addEventListener("drop",dropHandler,false);
dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
dropContainer.addEventListener("drop", dropHandler, false);
getResult()
}
function dropHandler(event){
var files = event.dataTransfer.files;
var count = files.length;
form = new FormData();
for(var i= 0;i<count;i++){
form.append("file"+i, files[i]);
}
sendData();
}
function sendData(){
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.open("POST", "/upload");
xhr.send(form);
var progressBar = document.getElementById('progressBar');
progressBar.style.display = 'block';
progressBar.style.width = '0px';
}
la démo est ici(http://flexinnerp.appspot.com/) juste en profiter :)
définir plusieurs attributs comme:
type d'entrée = "file" name= "file1" multiple = "multiple" class=" DropHere "
et utiliser cette classe CSS DropHere:
.DropHere
{
height: 100px;
padding: 3px;
border: 2px dashed #555;
border-radius: 5px;
cursor: default;
background-image:url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='220px'><text x='55' y='75' font-size='20'>or drop files here</text></svg>");
background-repeat: no-repeat;
}
le champ file ressemblera maintenant à:
si vous utilisez asp.net vous pouvez également aimer cet article j'ai écrit "téléchargement de fichiers multiples avec barre de progression et de glisser-déposer": http://www.codeproject.com/Articles/818561/Multiple-file-upload-with-progress-bar-and-drag-an