Teilen Sie Beispiele für das Hochladen mehrerer HTML5-Bildvorschauen und Steuerelemente zum Klicken und Ziehen

Ich habe beim Hochladen von Bildern ein sehr nützliches Steuerelement gefunden. Es unterstützt das gleichzeitige Hochladen mehrerer Bilder. Sie können ein Bild auswählen oder es direkt in das Upload-Feld ziehen. Einfach zu bedienen und die Benutzeroberfläche ist einfach und einfach. Sie kann 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“, geben Sie Ihre Bild-Upload-Aktion ein, dieses Steuerelement dient nur der Vordergrundverarbeitung, Sie müssen den Hintergrund-Upload selbst schreiben

Verwandte Empfehlungen:

PHP imitiert die WeChat-Funktion zur Vorschau und zum Hochladen mehrerer Bilder

Detailliertes H5-Beispiel für den Abschluss des Hochladens mehrerer Bilder

Beispielcode für PHP zum Hochladen mehrerer Dateien und Bilder

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für das Hochladen mehrerer HTML5-Bildvorschauen und Steuerelemente zum Klicken und Ziehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!