7
votes

Est-il possible de glisser + déposer un fichier du navigateur sur le bureau, provoquant un téléchargement?

J'ai une application qui stocke des fichiers et utilise glisser-déposer pour les télécharger. Existe-t-il une façon de faire glisser + Drop pour télécharger le fichier sur mon bureau au lieu de devoir cliquer sur "Télécharger". Fondamentalement, l'inverse de Drag + Drop Upload.


3 commentaires

Si c'était peut-être que je voudrais imaginer que vous devriez écrire une extension de navigateur.


En fait, il est possible avec chrome: thecssninja.com/javascript/gmail-dragout


@raymi Link est brisé par moi. Pouvez-vous s'il vous plaît fournir un nouveau lien?


3 Réponses :


1
votes

Non, vous auriez besoin de pouvoir définir un chemin de téléchargement, si rien d'autre, lequel aucun navigateur ne vous permet de faire. C'est possible avec un plugin, mais pas un JS droit.


4 commentaires

Question de suivi - suggéreriez-vous un plugin de navigateur pour y parvenir, ce qui signifie que je devrais créer un plugin pour chaque navigateur ou un type d'intégration de bureau?


Je ne suggérerais pas d'essayer, d'être honnête. C'est un comportement non standard et personne ne va l'essayer à moins de leur donner des instructions. Oui, vous auriez besoin d'un plugin différent dans chaque navigateur.


Faux - c'est (maintenant) possible de faire cela. Chrome a une méthode (voir la réponse ci-dessous) et il semble que Firefox nécessite une extension ( SuperUserSer.com/Questions/758797/... )


@Abacus - Cette question est quatre ans et demi . Toute personne qui a vu cela devrait se rendre compte que la technologie change toujours et qu'une réponse à ce vieux a peu de valeur. S'il vous plaît n'ajoutez pas de bruit aléatoire, sans oublier de voter une réponse simplement parce que c'est obsolète ... Sheesh



2
votes

Il est pris en charge dans Google Chrome.
http://www.html5rocks.com/fr/ Tutoriels / MDN / Basics / # TOC-Desktop-Dnd-out Par exemple, il est mis en œuvre dans Gmail.

Aucun de tout autre navigateur ne supporte ce comportement.


2 commentaires

Démo de thecssninja.com/javascript/gmail-dragout fonctionne au moins dans Firefox 31.4 sous Linux.


Il y a beaucoup à lire et à trier dans les tutoriels - Voici le code viable minimum pour démontrer comment cela fonctionne: glisser "rel =" NOFOOLS NOREFERRER "> Google.com' ) "> Drag moi



4
votes

Les HTML5Rocks et CSSninja sont ok, mais je pense que la voie excessive pour des réponses rapides. Voici un exemple simple d'utiliser des événements de traînée de quelque chose, y compris pour télécharger des fichiers.

<style>
div { background-color: #eee; border: 1px solid black; padding: 5px; float: left; clear: both; }
</style>
<div id="uiLinkText"           draggable="true">Drag <b>Text</b> to a text editor </div>
<div id="uiLinkHyperlink"      draggable="true">Drag <b>Hyperlink</b> to address bar </div>
<div id="uiLinkUrlDownload"    draggable="true">Drag <b>Url Download</b> to file system </div>
<div id="uiLinkStaticDownload" draggable="true">Drag <b>Static Download</b> to file system </div>
<script>
document.getElementById('uiLinkText').ondragstart = function(event){
  // plain text, for dropping into text editor
  event.dataTransfer.setData('text/plain', 'Go to http://stackoverflow.com/questions/5411481/ to read about this.');
}
document.getElementById('uiLinkHyperlink').ondragstart = function(event){
  // URL, for dropping into the browser's address bar
  event.dataTransfer.setData('text/uri-list', 'http://stackoverflow.com/questions/5411481/');
}
document.getElementById('uiLinkUrlDownload').ondragstart = function(event){
  // file download contents, for dropping into a file system
  event.dataTransfer.setData('DownloadURL', 'text/plain:SourceQuestion.html:http://stackoverflow.com/questions/5411481/')
}
document.getElementById('uiLinkStaticDownload').ondragstart = function(event){
  var textToWrite = 'file contents here';
  var textFileAsBlob = new Blob([textToWrite], { type: 'text/xml' });
  var url = window.URL.createObjectURL(textFileAsBlob);
  // file download contents, for dropping into a file system
  event.dataTransfer.setData('DownloadURL', 'text/plain:Static.txt:' + url)
}
</script>


1 commentaires

Fonctionne bien en chrome et à l'opéra. Ne fonctionne pas dans Firefox.