h5 implementiert mehrere Bildvorschau-Uploads und Steuerelemente zum Klicken und Ziehen

Dieses Mal bringe ich Ihnen h5 zum Implementieren der Vorschau mehrerer Bilder zum Hochladen und zur Implementierung von Steuerelementen zum Hochladen mehrerer Bilder und zum Ziehen per Mausklick Hinweise Ja Welche, die folgenden sind praktische Fälle, werfen wir einen Blick darauf.

Ich habe ein sehr nützliches Steuerelement beim Hochladen von Bildern gefunden. Es unterstützt das gleichzeitige Hochladen mehrerer Bilder, oder Sie können das Bild in das Upload-Feld ziehen und es direkt hochladen ist komfortabel, einfach zu bedienen und auch die Benutzeroberfläche ist einfach und kann grundsätzlich direkt im Projekt verwendet werden.

Schauen Sie sich zuerst seinen Stil an:

Nach der Auswahl des Bildes:

$(function(){  
    // 初始化插件  
    $("#demo").zyUpload({  
        width            :   "650px",                 // 宽度  
        height           :   "400px",                 // 宽度  
        itemWidth        :   "120px",                 // 文件项的宽度  
        itemHeight       :   "100px",                 // 文件项的高度  
        url              :   "/upload/UploadAction",  // 上传文件的路径  
        multiple         :   true,                    // 是否可以多个文件上传  
        dragDrop         :   true,                    // 是否可以拖动上传文件  
        del              :   true,                    // 是否可以删除文件  
        finishDel        :   false,                   // 是否在上传文件完成后删除预览  
        /* 外部获得的回调接口 */  
        onSelect: function(files, allFiles){                    // 选择文件的回调方法  
            console.info("当前选择了以下文件：");  
            console.info(files);  
            console.info("之前没上传的文件：");  
            console.info(allFiles);  
        },  
        onDelete: function(file, surplusFiles){                     // 删除一个文件的回调方法  
            console.info("当前删除了此文件：");  
            console.info(file);  
            console.info("当前剩余的文件：");  
            console.info(surplusFiles);  
        },  
        onSuccess: function(file){                    // 文件上传成功的回调方法  
            console.info("此文件上传成功：");  
            console.info(file);  
        },  
        onFailure: function(file){                    // 文件上传失败的回调方法  
            console.info("此文件上传失败：");  
            console.info(file);  
        },  
        onComplete: function(responseInfo){           // 上传完成的回调方法  
            console.info("文件上传完成");  
            console.info(responseInfo);  
        }  
    });  
});

Ändern Sie die Konfiguration direkt in demo.js, URL: „/upload/UploadAction“ und legen Sie Ihre Bild-Upload-Aktion fest. Sie müssen den Hintergrund-Upload selbst schreiben

Ich glaube, Sie haben es gelesen Der Fall in diesem Artikel: Nachdem Sie die Methode beherrscht haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

Wie text-align die Ausrichtung an beiden Enden erreicht

So lösen Sie das Problem der unvollständigen Anzeige von Android-Texteingabe

JavaScript-Vererbung und Prototypenkette

Das obige ist der detaillierte Inhalt vonh5 implementiert mehrere Bildvorschau-Uploads und Steuerelemente zum Klicken und Ziehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!