HTML5 implémente des fonctions de téléchargement d'images simples et multiples

Préface

Aujourd'hui, nous parlons de téléchargement d'images, simples ou multiples. De nos jours, il existe d'innombrables plug-ins majeurs de téléchargement d'images, tels que : verupload.js de Jquery, jQuery File Upload, Uploadify, jQuery.filter, etc. Mais. Nous ne parlerons pas aujourd'hui des plug-ins mentionnés ci-dessus. Voyons comment utiliser FileReader en HTML5 pour réaliser un aperçu, une suppression, un téléchargement et d'autres fonctions d'images uniques et multiples. Jetons un coup d'œil à l'effet après la mise en œuvre :

Il s'agit du bouton sur lequel l'utilisateur clique. Notre phrase la plus importante est input type=file et un attribut multiple est donné, ce qui peut répondre aux besoins de téléchargement de plusieurs images.

 <div class=form-group form-row> <label class=col-sm-2 control-label uText>Album du club</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <label <input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

La zone ci-dessous est utilisée pour l'aperçu de l'image

 <div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm ></div> </div> </div></div>

Quoi? Il faut même regarder le style pour voir si c’est toujours humain (sourire ironique)

Tout d'abord, analysons le code HTML ci-dessus. Nous utilisons une étiquette pour envelopper l'entrée et une balise img. Nous espérons qu'en cliquant sur l'image + dans le rendu, une boîte de dialogue de sélection de photos apparaîtra. l'étiquette une étiquette en premier. Cliquez sur l'événement :

 $(#btnClubImg).click(function() { //TODO Something});

Regardons cela ensuite, car nous voulons obtenir le fichier téléchargé, et notre fichier est principalement sur l'entrée, nous obtenons donc d'abord la balise d'entrée :

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//Imprimer l'élément actuel});

Imprimons l'étiquette actuelle de l'élément d'entrée pour voir de quoi il s'agit.

Lorsque nous développons le premier élément, nous constatons que la longueur des fichiers est de 0.

Bon, continuons l'analyse, car nous voulons pouvoir obtenir le fichier actuellement sélectionné lorsque la zone de saisie change. Pour faire simple, lorsqu'un fichier est sélectionné, nous pouvons obtenir le fichier actuellement sélectionné. C'est la même chose que l'obtention. le texte saisi dans la zone de saisie. Par conséquent, après analyse, nous savons que nous devons ajouter un événement de changement à la balise d'entrée :

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);// Imprimer l'élément actuel modifié});});

Jetons un coup d'œil et obtenons ce qu'il y a à l'intérieur de l'élément d'entrée modifié :

On peut clairement voir ici que nous avons obtenu l'image sélectionnée, y compris le dernier événement de modification, le nom de l'image, la taille et le type d'image (avec le type de fichier, nous pouvons juger si l'utilisateur actuel sélectionne une image, n'est-ce pas ? (sourire plissant les yeux) )) Encore une fois, il s'agit d'un seul fichier. S'il s'agit de plusieurs fichiers, il y aura plusieurs fichiers.

En regardant vers le bas, nous pouvons voir sur l'impression que nous avons les informations de fichier que nous voulons sur l'élément files de la balise d'entrée, il nous suffit de les obtenir :

 var files = this.files; var length = files.length;

De cette façon, nous pouvons obtenir tous les fichiers et le nombre de fichiers. Alors voici la question si nous sélectionnons plusieurs fichiers, que se passe-t-il si nous les publions un par un et les affichons sur la page ? Lorsque vous avez vu les quatre mots marqués ci-dessus, deux mots vous sont-ils venus à l’esprit ? faire du vélo

 $.each(files, function (key, value) { //TOTO Something });

En parcourant les fichiers obtenus ci-dessus, nous pouvons obtenir les informations de chaque fichier tour à tour. De cette façon, vous pouvez non seulement les sortir les uns après les autres, mais si vous le souhaitez, vous pouvez également les envoyer au paradis ~

 var fileReader = new FileReader();//Instancier un objet FileReader var file_ = files[key];//Obtenir le fichier actuel if (/^image///w+$/.test(file_.type)) {// Effectuez une correspondance régulière sur le fichier actuel pour voir s'il s'agit de l'image sélectionnée fileReader.onload = function() {//Appelé lorsque l'opération de lecture est terminée} }

Il est nécessaire d'étendre les points de connaissances de FileReader :

FileReader est principalement utilisé pour lire le contenu des fichiers en mémoire grâce à une série d'interfaces asynchrones, les fichiers locaux sont accessibles dans le thread principal.

À l'aide des objets FileReader, les applications Web peuvent lire de manière asynchrone le contenu des fichiers (ou des tampons de données brutes) stockés sur l'ordinateur de l'utilisateur. Vous pouvez utiliser des objets File ou des objets Blob pour spécifier les fichiers ou les données à traiter.

De retour au sujet, nous avons pu récupérer le fichier et obtenir le retour, donc pour le moment, il nous suffit d'afficher le résultat renvoyé.

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

Imprimons ceci.result pour voir ce que c'est :

Il va sans dire que l'image est convertie au format de données Base64. Enfin, nous appelons readAsDataURL pour lire le contenu du fichier et le représenter sous la forme d'une chaîne data:url.

fileReader.readAsDataURL(value);

De cette façon, vous pouvez obtenir une simple démo de téléchargement d'image, mais elle n'est pas définitive car vous devez encore ajouter beaucoup d'activité. Par exemple : après avoir obtenu une image d'aperçu, l'étiquette actuelle sera occupée. Si vous effectuez une boucle la prochaine fois et utilisez directement l'étiquette d'origine, l'image précédente sera définitivement remplacée. Ce n'est certainement pas l'effet que nous souhaitons. pouvoir l'afficher en séquence, plutôt que de remplacer l'affichage. Nous devons donc encore effectuer quelques traitements :

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));//Utilisez apend pour ajouter un nœud enfant sous l'élément actuel $(#clubInputImagePreview) .append(<img src='/Images /registNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//Utiliser after pour ajouter un nœud frère au nœud frère actuel $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - aperçu-sm delImg' ></div>);

Ensuite, lorsque nous ajoutons l'image supprimée, nous devons également lui attribuer un événement de clic pour faire disparaître notre zone d'aperçu actuelle :

 $(#ImgRemove).click(function () { $(this).parent().remove();});

En fin de compte, vous constaterez que le résultat n'est pas celui que nous souhaitons. En effet, l'ID actuel est toujours là, donc l'étape suivante ne peut pas être effectuée. Il suffit de supprimer l'ID de l'élément actuel, puis d'en ajouter un. élément avec le même ID, donc le navigateur pensera qu'il s'agit d'un nouvel élément :

 $input.removeAttr(id); var newInput ='<input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>' $(this).append($(newInput));

Le code JS final complet est le suivant :

 var intP = 0 ; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(change, function () {// console.log(this); var files = this.files; var length = files.length; if (intP > 8) { layer.msg('Plus d'images~', {}); return; } $.each(fichiers, fonction (clé, valeur) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { layer.msg('Plus d'images~', {}); return; intP == 0) { console.log(this.result); $(#clubInputImagePreview).css(background-image, url( + this.result + )); $(#clubInputImagePreview) .append( <img src=' /Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div>); else { $(#clubInputImagePreview + parseInt(intP) + ).css(background-image, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' ></div> } if (clé == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); }); else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .click(function () { $(this).parent().remove(); }); intP += parseInt(1); fileReader.readAsDataURL(value); } else { layer.msg(Erreur de format<br/>Veuillez sélectionner un fichier image); $input.removeAttr(id); file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput));

Ce qui précède est l'implémentation HTML5 des fonctions de téléchargement d'images simples et multiples introduites par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps !