Lors du téléchargement de plusieurs images en php, le problème peut être prévisualisé après avoir sélectionné l'image-tutoriel php-php.cn

Lors du téléchargement de plusieurs images en php, le problème peut être prévisualisé après avoir sélectionné l'image

藏色散人

Libérer： 2023-04-09 11:16:01

avant

2964 Les gens l'ont consulté

J'ai résolu un problème ces jours-ci. Lorsque vous téléchargez une image, vous pouvez la prévisualiser après l'avoir sélectionnée avec succès.

Lors du téléchargement de plusieurs images en php, le problème peut être prévisualisé après avoir sélectionné limage

Exigence : lorsque vous cliquez sur l'icône de téléchargement, le nom du fichier sera affiché dans la zone de saisie avant, puis cliquez sur le bouton d'affichage derrière pour prévisualiser J'ai sélectionné cette image, mais il est nécessaire que la page ne puisse pas être actualisée

1. Au début, j'avais prévu d'utiliser ajax pour la télécharger, mais plus tard j'ai découvert qu'il y aurait des problèmes lors du téléchargement de plusieurs images sur en même temps. Le principe du téléchargement d'images ajax est que lorsque vous sélectionnez Lorsqu'une photo est prise, js sera utilisé pour envelopper un formulaire en dehors de la zone de saisie de type fichier, puis automatiquement soumis au fichier php via ajaxSubmit. être téléchargé via le fichier php, et enfin un chemin d'image téléchargé sur le serveur sera renvoyé. Cliquez sur Vous pouvez obtenir cette image en la visualisant. En fait, l'image a été téléchargée sur le serveur à ce moment-là. Mais cette exigence concerne plusieurs images, ce qui entraînera de gros problèmes.

2. Plus tard, j'ai découvert sur Internet que js est utilisé pour prévisualiser les images sélectionnées localement en temps réel. La différence entre cela et le téléchargement ajax est qu'après avoir sélectionné le fichier image, il ne sera pas téléchargé sur le fichier. serveur, mais directement récupéré depuis la machine locale. Aperçu du chemin de l'image. Vous trouverez ci-dessous un exemple de la manière dont cette approche a été utilisée pour obtenir le résultat final.

Méthode :

<input type="file" name="photo_file[]" class="ata_pt" οnchange="previewImage(this)"/>
<input type="hidden" class="imageurl" />

Copier après la connexion

Vous avez d'abord besoin d'une zone de saisie pour télécharger des fichiers

Ajoutez ensuite une zone de saisie de formulaire cachée ci-dessous pour obtenir son chemin d'image local<🎜 >

//图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
            if (file.files && file.files[0])
            {
                var reader = new FileReader();
                reader.onload = function(evt){
                    $(file).next().val(evt.target.result);
                }
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter=&#39;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="&#39;;
                file.select();
                var src = document.selection.createRange().text;
                //p.innerHTML = &#39;<img  id=imghead alt="Lors du téléchargement de plusieurs images en php, le problème peut être prévisualisé après avoir sélectionné l'image" >&#39;;
                //var img = document.getElementById(&#39;imghead&#39;);
                //img.filters.item(&#39;DXImageTransform.Microsoft.AlphaImageLoader&#39;).src = src;
                $(this).next().val(src);
                //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                //status =(&#39;rect:&#39;+rect.top+&#39;,&#39;+rect.left+&#39;,&#39;+rect.width+&#39;,&#39;+rect.height);
                //p.innerHTML = "<p id=phead style=&#39;width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"&#39;></p>";
            }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }

Copier après la connexion

Vous pouvez voir que la méthode previewImage() est appelée lors de la sélection d'une image. Cette méthode est utilisée pour obtenir l'adresse de l'image locale et la transmettre dans la zone de saisie avec la classe imageurl. Après

, j'ai créé un bouton d'affichage. J'ai ajouté un bouton directement sous

<input type="hidden" class="imageurl" />

Copier après la connexion

Lorsque l'on clique sur ce bouton, $(this).prev().val() est obtenu. transmettez-le à l'img in p où vous souhaitez afficher l'image, afin que l'image soit affichée

<p><img  src=" " id="preview" alt="Lors du téléchargement de plusieurs images en php, le problème peut être prévisualisé après avoir sélectionné l'image" ></p>

Copier après la connexion

Après avoir testé, cette méthode peut satisfaire Firefox, Chrome, ie10 et supérieur, et c'est fondamentalement suffisant.

Je ne m'attendais pas à ce que le problème que j'insistais depuis quelques jours soit résolu de cette façon. L'efficacité n'est pas élevée, j'ai donc besoin d'accumuler de l'expérience ! Gagnez de l'expérience ! Gagnez de l'expérience !

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!