Implementierungsmethode für die Vorschau des Hochladens von Javascript-Bildern (Quellcode beigefügt)

Dieser Artikel bietet Ihnen eine detaillierte Erklärung der PHP-Synergie-Implementierung (mit Code). Freunde in Not können sich darauf beziehen.

Hallo zusammen, das Spiel hat begonnen. Herzlich willkommen, sich diese Erklärungsfolge anzusehen. Der Inhalt ist dieses Mal die Upload-Vorschau des Bildes. Senden Sie abschließend den Quellcode-Link.

Beginnen wir ohne weitere Umschweife mit den Bildern.

Bild, das hochgeladen werden soll

Klicken Sie in das blaue Feld und Sie können die Datei auf dem PC in der mobilen App auswählen , können Sie ein Foto aufnehmen oder ein Bild zum Hochladen auswählen.

HTML-Teil

<div>
    <div>
        <div>
            <img  alt="Implementierungsmethode für die Vorschau des Hochladens von Javascript-Bildern (Quellcode beigefügt)" >
            <div>请点击</div>
            <img  alt="Implementierungsmethode für die Vorschau des Hochladens von Javascript-Bildern (Quellcode beigefügt)" >
        </div>
        <div></div>
        <input>
    </div>
</div>

.default-box Diese Ebene ist das Plusbild
up-img ist dort, wo das Bild nach der Transkodierung angezeigt wird.
In der Eingabe unten wählen Sie das Bild aus.

css

        .img-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card-box {
            width: 7.5rem;
            height: 4rem;
            border: solid .04rem #23a7fe;
            border-radius: 4px;
            box-sizing: border-box;
            position: relative;
        }
        .upImg-btn {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        .up-img {
            width: 5.58rem;
            height: 3.12rem;
            margin: .2rem .6rem;
            position: absolute;
            top: .2rem;
            left: 0;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover
        }
        .default-box {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .add-img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -.64rem;
            margin-top: -.64rem;
            width: 1.28rem;
            height: 1.28rem;
        }
        .default-img {
            position: absolute;
            padding: 0 1.1rem;
            bottom: .68rem;
            box-sizing: border-box;
            width: 100%;
            opacity: .5;
        }
        .default-title {
            position: absolute;
            width: 100%;
            bottom: .12rem;
            text-align: center;
            color: #23a7fe;
            font-size: .32rem;
        }

Das Innere ist die Positionierung.

Seite js

    document.querySelector("#addImg").addEventListener("change",function () {
        changeImg({
            id:"addImg",           //input的Id   必须
            imgBox:'upImg',        //显示位置Id   必须
            limitType:['jpg','png','jpeg'],   //支持的类型   必须
            limitSize:819200          //图片超过多大开始进行压缩    可不传
        });
    });

Wir überwachen die Änderungszeit der Eingabe und übergeben dann den Parameter dShowImg64.js-Code

     //id,limitType,limitSize
    function changeImg(obj = {}) {                          
        if(!obj.id) return;
        if(!obj.limitType)return;
        var dom = document.querySelector("#"+obj.imgBox);
        var files =  document.querySelector("#"+obj.id).files[0];
        var reader = new FileReader();
        var type = files.type && files.type.split('/')[1];           //文件的类型，判断是否是图片
        var size = files.size;         //文件的大小，判断图片的大小
        if (obj.limitType.indexOf(type) == -1) {
            alert('不符合上传要求');
            return;
        }
        //判断是否传入限制大小。压不压缩。
        var limitSize = obj.limitSize ? parseInt(obj.limitSize) : 0;
        if (size <p>Erstens erhalten Sie verschiedene Attribute wie Typ und Größe <br>Beurteilen Sie, ob das Bild kleiner als die Grenzgröße ist. Wenn es kleiner ist, konvertieren Sie es direkt in Base64. Wenn es größer ist, verkleinern Sie es mit Canvas, schließen Sie die Komprimierung ab, konvertieren Sie es dann in Base64 und stellen Sie es dann ein den erhaltenen Wert als Hintergrundbild. Dann blenden Sie den Add-Style aus. </p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/407/191/539/1540188541275097.png" title="1540188541275097.png" alt="Implementierungsmethode für die Vorschau des Hochladens von Javascript-Bildern (Quellcode beigefügt)"></span><br>Letztes Vorschaubild</p><p>Git-Adresse: <a href="https://github.com/Zhoujiando...">https://github.com/Zhoujiando...</a><br></p><p>Weitere Widgets werden in Zukunft hinzugefügt. Abschließend wünsche ich Ihnen allen gute Gesundheit, vielen Dank. </p><p class="comments-box-content"></p>

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für die Vorschau des Hochladens von Javascript-Bildern (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!