Beim Hochladen mehrerer Bilder in PHP kann das Problem nach Auswahl des Bildes in der Vorschau angezeigt werden

Ich habe in diesen Tagen ein Problem gelöst. Wenn Sie ein Bild hochladen, können Sie es nach erfolgreicher Auswahl in der Vorschau anzeigen.

Anforderung: Wenn Sie auf das Upload-Symbol klicken, wird der Dateiname im vorderen Eingabefeld angezeigt. Klicken Sie dann auf die Ansichtsschaltfläche dahinter, um eine Vorschau anzuzeigen Ich habe dieses Bild ausgewählt, aber es ist erforderlich, dass die Seite nicht aktualisiert werden kann

1. Am Anfang hatte ich geplant, es mit Ajax hochzuladen, aber später stellte ich fest, dass es beim Hochladen mehrerer Bilder zu Problemen kommen würde Das Prinzip des Ajax-Hochladens von Bildern besteht darin, dass beim Aufnehmen eines Bildes js verwendet wird, um ein Formular außerhalb des Eingabefelds vom Typ Datei einzuschließen und es dann automatisch über ajaxSubmit an die PHP-Datei zu senden Es wird über die PHP-Datei hochgeladen und schließlich wird ein auf den Server hochgeladener Bildpfad zurückgegeben. Sie können dieses Bild abrufen, wenn Sie es anzeigen. Tatsächlich wurde das Bild zu diesem Zeitpunkt auf den Server hochgeladen. Diese Anforderung gilt jedoch für mehrere Bilder und führt zu großen Problemen.

2. Später habe ich im Internet herausgefunden, dass js zur Vorschau lokal ausgewählter Bilder in Echtzeit verwendet wird. Der Unterschied zum Ajax-Upload besteht darin, dass die Bilddatei nach der Auswahl nicht hochgeladen wird Server, sondern direkt vom lokalen Computer abgerufen. Pfadvorschau des Bildes. Nachfolgend finden Sie ein Beispiel dafür, wie mit diesem Ansatz das Endergebnis erzielt wurde.

Methode:

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

Zuerst benötigen Sie ein Eingabefeld zum Hochladen von Dateien

Dann fügen Sie unten ein verstecktes Formular-Eingabefeld hinzu, um den lokalen Bildpfad zu erhalten

//图片上传预览    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='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                //p.innerHTML = &#39;<img  id=imghead alt="Beim Hochladen mehrerer Bilder in PHP kann das Problem nach Auswahl des Bildes in der Vorschau angezeigt werden" >&#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;
        }

Sie können sehen, dass bei der Auswahl eines Bildes die Methode „previewImage()“ aufgerufen wird. Diese Methode wird verwendet, um die Adresse des lokalen Bildes abzurufen und sie mit der Klasse imageurl an das Eingabefeld zu übergeben. Nach

habe ich direkt unter

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

eine Schaltfläche hinzugefügt. Wenn auf diese Schaltfläche geklickt wird, wird $(this).prev().val() abgerufen Übergeben Sie es an das img in p, an dem Sie das Bild anzeigen möchten, damit das Bild angezeigt wird

<p><img  src=" " id="preview" alt="Beim Hochladen mehrerer Bilder in PHP kann das Problem nach Auswahl des Bildes in der Vorschau angezeigt werden" ></p>

Nach dem Testen kann diese Methode Firefox, Chrome, ie10 und höher erfüllen und ist im Grunde ausreichend.

Ich hätte nicht erwartet, dass das Problem, auf das ich seit ein paar Tagen dränge, auf diese Weise gelöst wird. Die Effizienz ist nicht hoch, also muss ich Erfahrungen sammeln! Erfahrungen sammeln! Erfahrungen sammeln!

Das obige ist der detaillierte Inhalt vonBeim Hochladen mehrerer Bilder in PHP kann das Problem nach Auswahl des Bildes in der Vorschau angezeigt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!