Est-il possible que javascript ou html crée une zone de dépôt pour les images à faire glisser par un utilisateur? Je suppose que c'est un espace réservé pour l'image qui acceptera les images qui y sont glissées pendant que la page est en ligne?Comment créer une zone de dépôt pour les images à glisser?
Images d'où? Si vous voulez pouvoir faire glisser des images à partir de la page Web elle-même, c'est possible, mais si vous voulez que les images de l'extérieur soient supprimées, c'est simplement impossible avec JavaScript. difficile pour le moment. Comme l'a mentionné @Bohn Boker, c'est possible, mais pour l'instant, les API sont hautement non standard et varient énormément d'un navigateur à l'autre. HTML 5 prendra en charge une API standard et plus simple pour cela, mais HTML 5 lui-même n'est pas encore standard.
Quelques ressources:
Réponse courte: Oui, vous pouvez, mais votre Le navigateur doit prendre en charge les API de glisser-déposer et de fichiers faisant partie de HTML5. Actuellement, ce n'est que Chrome 8+ et Firefox 3.6+.
Juillet 2011 Mise à jour: les navigateurs actuels qui prennent en charge ce sont Chrome, Firefox, Safari 6 (et Safari 5 si vous utilisez des objets formData) et IE 10 Preview 2. Plus d'informations here.
IE 8 et 9 ne fonctionnent pas, pas sûr si IE9 final va changer cela. Safari 5 (autant que Apple rabat HTML5) n'a pas de support pour l'API File nécessaire et DnD de ressources natives n'est pas reconnu (DnD dans la page peut être fait pour fonctionner, mais ce n'est que la moitié du problème). Vous pouvez contourner ce manque dans Safari 5 en utilisant une astuce de style sur un champ INPUT de type "FILE" pour ne pas afficher la barre de chemin du fichier et utiliser le fait que Drag and Drop sur une boîte de téléchargement de fichier dans Safari insère réellement le nom de fichier complet - vous utilisez un peu de JavaScript pour déclencher le téléchargement dès qu'ils dropent et alto. Voici a tutorial spécifiquement pour ce hack. Opera ne semble pas supporter l'API - J'ai lu qu'ils attendaient la bataille de la spécification HTML5 jusqu'à ce que la poussière se stabilise ALORS l'ajout de la prise en charge des API nécessaires pour cela.
Je suis en fait l'auteur du HTML5 Drag and Drop/File API Upload tutorial lié ci-dessus et utilisé cette méthode pour implémenter exactement ce que vous voulez à imgscalr.com - le JavaScript est fortement commenté si vous voulez le retirer et regarder comment je le fais.
Espérons que ça aide.
Récemment http://www.dropzonejs.com/ est devenu très populaire.
Seulement valable pour les dernières versions des navigateurs, mais un très bon widget JS. –
@EsteveCamps Les API nécessaires pour prendre en charge le téléchargement par glisser-déposer ne sont prises en charge que par les navigateurs modernes. Donc, ce n'est pas une restriction DropzoneJS - il fournit même une solution de repli pour les navigateurs plus anciens. – enyo
Il est possible de faire glisser des fichiers du bureau vers le site Web, même si ce n'est pas si simple. un exemple serait les pièces jointes Gmail. faites glisser un fichier sur l'e-mail que vous composez et il l'ajoutera/le téléchargera. –
tout extrait de code sera aide complète .... – Zain
@ user441207: J'ai ajouté quelques liens. – casablanca