Introduction détaillée au glisser-déposer pour télécharger des images

Cet article présente principalement HTML5+CSS3 pour réaliser le téléchargement d'images par glisser-déposer sans plug-in (prend en charge l'aperçu et le traitement par lots). Désormais, HTML5 fournit une API et des API puissantes telles que File, FileReader, XMLHttpRequest, etc. fournissez-nous un téléchargement par glisser-déposer possible. Ceux qui sont intéressés peuvent le découvrir. Le téléchargement est essentiellement quelque chose qui se produit souvent dans les projets. Il est généralement utilisé : 1. soumission de formulaire 2. flash3, la soumission de formulaire HTML5 actualisera la page, et il est difficile de télécharger de manière asynchrone. Flash peut être utilisé davantage car il peut en tenir compte ; presque toutes les navigations, j'ai toujours utilisé uploadify de jQuery comme outil de téléchargement dans le projet. Uploadify est également basé sur Html5 et semble être payant. Vous pouvez aller sur le site officiel pour y jeter un œil. Bien sûr, html5 fournit désormais une API puissante. des fonctions telles que File, FileReader, XMLHttpRequest, etc. L'API nous offre la possibilité de glisser-déposer pour télécharger. Rendu 1 : Rendu 2 : Parce que le téléchargement local est trop rapide, j'ai enregistré un gif de 80 Mo, et enfin vous pouvez voir l'effet détaillé du téléchargement

1. Introduction détaillée au glisser-déposer d'images à télécharger sans plug-in (prend en charge l'aperçu et le lot)

Introduction : Cet article présente principalement HTML5+CSS3 pour réaliser le téléchargement d'images par glisser-déposer sans plug-ins (prend en charge l'aperçu et le traitement par lots). Désormais, HTML5 fournit des API et des API puissantes telles que File, FileReader, XMLHttpRequest, etc., ce qui rend il nous est possible de faire un glisser-déposer pour télécharger des images. Ceux qui sont intéressés peuvent le découvrir.

2. Cas classique HTML5/CSS3 - glisser-déposer pour télécharger des images sans plug-in (2)

Introduction : L'article précédent a implémenté le HTML et CSS global de ce projet : HTML5 CSS3 Cas classique : Glisser-déposer pour télécharger des images sans plug-ins (prend en charge l'aperçu et batch) (1) Ce Ce blog est directement basé sur le précédent L'effet final est : Rendu 1 : Rendu 2 : D'accord, permettez-moi de poster la photo deux fois pour que tout le monde puisse voir l'effet ~ Vous pouvez voir le li de notre image HTML est en fait assez compliquée, j'ai donc apporté quelques modifications au document HTML :

3 Cas classique HTML5/CSS3 - téléchargement des images par glisser-déposer sans. plug-in (1)

Introduction : la soumission du formulaire actualisera la page, ce qui rendra le téléchargement difficile de manière asynchrone ; Flash peut être plus utile, car il peut prendre en compte presque tous les navigateurs. J'ai toujours utilisé uploadify de jQuery comme outil de téléchargement dans le projet. Uploadify est également basé sur Html5 et semble être payant. site officiel pour y jeter un œil ; bien sûr, html5 fournit désormais une API et des API puissantes telles que File, FileReader, XMLHttpRequest, etc. nous offrent la possibilité de glisser-déposer pour télécharger.

4. JS HTML5 glisser-déposer un aperçu de l'image de téléchargement

Introduction : Cet article présente principalement en détail les informations pertinentes sur l'aperçu de l'image de téléchargement par glisser-déposer JS HTML5. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

5. . exemple d'image de téléchargement par glisser-déposer html5 démonstration_html5 compétences pédagogiques

Je fais référence à un album photo étranger pour le style d'interface Le site Web n'a pas a beaucoup changé, sauf que le chant des oiseaux a été converti en chinois et que le style de téléchargement a également été modifié. La raison pour laquelle j'ai choisi cela est qu'il est facile pour moi de le développer. Il prend en charge 3 façons d'ajouter des images, l'une est de faire glisser. et déposer, une option conventionnelle" width="400">

Introduction : La chose la plus importante à propos du téléchargement par glisser-déposer est la partie js du code, qui implémente 70% des fonctions. De plus, 30% soumettent simplement les informations de l'image en arrière-plan, puis effectuent le traitement correspondant, tel que la compression, le recadrage, etc. Les amis intéressés peuvent s'y référer. J'espère que cela pourra vous aider.

[Recommandations de questions et réponses associées] :

javascript - Demandez des idées sur la façon d'implémenter le téléchargement d'images par glisser-déposer à l'aide de js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!