glisser-déposer des fichiers dans une entrée de fichier html standard

Question

De nos jours, nous pouvons glisser et déposer des fichiers dans un conteneur spécial et les télécharger avec XHR 2. Plusieurs à la fois. Avec des barres de progression en direct, etc. C'est très cool. Exemple ici.

Mais parfois, nous ne voulons pas autant de fraîcheur. Ce que j'aimerais, c'est pouvoir glisser-déposer des fichiers, plusieurs à la fois dans un fichier HTML standard : <input type=file multiple> .

Est-ce possible ? Existe-t-il un moyen de "remplir" l'entrée de fichiers avec les bons noms de fichiers ( ?) à partir du dépôt de fichiers ? (Les chemins de fichiers complets ne sont pas disponibles pour des raisons de sécurité du système de fichiers).

Pourquoi ? Parce que je voudrais soumettre un formulaire normal. Pour tous les navigateurs et tous les appareils. Le glisser-déposer n'est qu'une amélioration progressive visant à améliorer et à simplifier l'interface utilisateur. Le formulaire standard avec entrée de fichier standard (+ multiple ) sera présent. J'aimerais ajouter l'amélioration HTML5.

modifier
Je sais que dans un peu de navigateurs, vous pouvez parfois (presque toujours) déposer des fichiers dans l'entrée de fichier elle-même. Je sais que Chrome fait généralement cela, mais parfois il échoue et charge le fichier dans la page en cours (un gros échec si vous remplissez un formulaire). Je veux le rendre infaillible pour les navigateurs.

Answer 1

J'ai créé une solution pour cela.

$(function () {
    var dropZoneId = "drop-zone";
    var buttonId = "clickHere";
    var mouseOverClass = "mouse-over";

    var dropZone = $("#" + dropZoneId);
    var ooleft = dropZone.offset().left;
    var ooright = dropZone.outerWidth() + ooleft;
    var ootop = dropZone.offset().top;
    var oobottom = dropZone.outerHeight() + ootop;
    var inputFile = dropZone.find("input");
    document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.addClass(mouseOverClass);
        var x = e.pageX;
        var y = e.pageY;

        if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
            inputFile.offset({ top: y - 15, left: x - 100 });
        } else {
            inputFile.offset({ top: -400, left: -400 });
        }

    }, true);

    if (buttonId != "") {
        var clickZone = $("#" + buttonId);

        var oleft = clickZone.offset().left;
        var oright = clickZone.outerWidth() + oleft;
        var otop = clickZone.offset().top;
        var obottom = clickZone.outerHeight() + otop;

        $("#" + buttonId).mousemove(function (e) {
            var x = e.pageX;
            var y = e.pageY;
            if (!(x < oleft || x > oright || y < otop || y > obottom)) {
                inputFile.offset({ top: y - 15, left: x - 160 });
            } else {
                inputFile.offset({ top: -400, left: -400 });
            }
        });
    }

    document.getElementById(dropZoneId).addEventListener("drop", function (e) {
        $("#" + dropZoneId).removeClass(mouseOverClass);
    }, true);

})

#drop-zone {
    /*Sort of important*/
    width: 300px;
    /*Sort of important*/
    height: 200px;
    position:absolute;
    left:50%;
    top:100px;
    margin-left:-150px;
    border: 2px dashed rgba(0,0,0,.3);
    border-radius: 20px;
    font-family: Arial;
    text-align: center;
    position: relative;
    line-height: 180px;
    font-size: 20px;
    color: rgba(0,0,0,.3);
}

    #drop-zone input {
        /*Important*/
        position: absolute;
        /*Important*/
        cursor: pointer;
        left: 0px;
        top: 0px;
        /*Important This is only comment out for demonstration purposes.
        opacity:0; */
    }

    /*Important*/
    #drop-zone.mouse-over {
        border: 2px dashed rgba(0,0,0,.5);
        color: rgba(0,0,0,.5);
    }

/*If you dont want the button*/
#clickHere {
    position: absolute;
    cursor: pointer;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: 20px;
    line-height: 26px;
    color: white;
    font-size: 12px;
    width: 100px;
    height: 26px;
    border-radius: 4px;
    background-color: #3b85c3;

}

    #clickHere:hover {
        background-color: #4499DD;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drop-zone">
    Drop files here...
    <div id="clickHere">
        or click here..
        <input type="file" name="file" id="file" />
    </div>
</div>

La fonctionnalité de glisser-déposer de cette méthode ne fonctionne qu'avec Chrome, Firefox et Safari. (Je ne sais pas si elle fonctionne avec IE10), mais pour les autres navigateurs, le bouton "Ou cliquez ici" fonctionne bien.

Le champ de saisie suit simplement votre souris lorsque vous faites glisser un fichier sur une zone, et j'ai également ajouté un bouton

Décommentez opacity:0 ; l'entrée du fichier est seulement visible pour que vous puissiez voir ce qui se passe.

Answer 2

C'est la façon "DTHML" HTML5 de le faire. Saisie normale du formulaire (qui EST en lecture seule comme l'a souligné Ricardo Tomasi). Ensuite, si un fichier est glissé, il est joint au formulaire. Il faudra modifier la page d'action pour accepter le fichier téléchargé de cette manière.

function readfiles(files) {
  for (var i = 0; i < files.length; i++) {
    document.getElementById('fileDragName').value = files[i].name
    document.getElementById('fileDragSize').value = files[i].size
    document.getElementById('fileDragType').value = files[i].type
    reader = new FileReader();
    reader.onload = function(event) {
      document.getElementById('fileDragData').value = event.target.result;}
    reader.readAsDataURL(files[i]);
  }
}
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  readfiles(e.dataTransfer.files);
}

#holder.hover { border: 10px dashed #0c0 !important; }

<form method="post" action="http://example.com/">
  <input type="file"><input id="fileDragName"><input id="fileDragSize"><input id="fileDragType"><input id="fileDragData">
  <div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc"></div>
</form>

C'est encore mieux si vous pouvez faire de toute la fenêtre une zone de dépôt, voir Comment détecter un événement de glisser HTML5 qui entre et sort de la fenêtre, comme le fait Gmail ?

Answer 3

//----------App.js---------------------//
$(document).ready(function() {
    var holder = document.getElementById('holder');
    holder.ondragover = function () { this.className = 'hover'; return false; };
    holder.ondrop = function (e) {
      this.className = 'hidden';
      e.preventDefault();
      var file = e.dataTransfer.files[0];
      var reader = new FileReader();
      reader.onload = function (event) {
          document.getElementById('image_droped').className='visible'
          $('#image_droped').attr('src', event.target.result);
      }
      reader.readAsDataURL(file);
    };
});

.holder_default {
    width:500px; 
    height:150px; 
    border: 3px dashed #ccc;
}

#holder.hover { 
    width:400px; 
    height:150px; 
    border: 3px dashed #0c0 !important; 
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

<!DOCTYPE html>

<html>
    <head>
        <title> HTML 5 </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    </head>
    <body>
      <form method="post" action="http://example.com/">
        <div id="holder" style="" id="holder" class="holder_default">
          <img src="" id="image_droped" width="200" style="border: 3px dashed #7A97FC;" class=" hidden"/>
        </div>
      </form>
    </body>
</html>

Answer 4

En théorie, vous pourriez ajouter un élément superposé à l'élément <input/> et utiliser ensuite sa fonction drop pour capturer les fichiers (en utilisant l'API Fichier) et les transmettre à l'entrée files le tableau.

Sauf qu'une entrée de fichier est en lecture seule . Il s'agit d'un vieux problème.

Vous pouvez toutefois contourner complètement le contrôle du formulaire et télécharger via XHR (je ne suis pas sûr de la prise en charge de cette fonction) :

• https://developer.mozilla.org/en/Using_files_from_web_applications
• http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob

Vous pourriez également utiliser un élément dans la zone environnante pour annuler l'événement de dépôt dans Chrome, et empêcher le comportement par défaut de charger le fichier.

Le dépôt de plusieurs fichiers sur l'entrée fonctionne déjà dans Safari et Firefox.

Answer 5

Ce que vous pourriez faire, c'est afficher une entrée de fichier et la superposer à votre zone de dépôt transparente, en prenant soin d'utiliser un nom tel que file[1] . {Soyez sûr d'avoir le enctype="multipart/form-data" dans votre balise FORM.}

Ensuite, la zone de dépôt gère les fichiers supplémentaires en créant dynamiquement des entrées de fichiers supplémentaires pour les fichiers 2..number_of_files, en veillant à utiliser le même nom de base et en remplissant l'attribut valeur de manière appropriée.

Enfin (front-end) soumettre le formulaire.

---

Pour gérer cette méthode, il suffit de modifier votre procédure pour gérer un tableau de fichiers.