Partage d'exemples de téléchargement d'aperçus multi-images HTML5 et de contrôles cliquer-glisser

J'ai trouvé un contrôle très utile lors du téléchargement d'images. Il prend en charge le téléchargement de plusieurs images en même temps. Vous pouvez cliquer pour sélectionner une image, ou vous pouvez faire glisser l'image vers la zone de téléchargement et la télécharger directement. facile à utiliser et l'interface est simple et basique. Elle peut être utilisée directement dans le projet.

Regardez d'abord son style :

Après avoir sélectionné la photo :

$(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);  
        }  
    });  
});

Modifiez la configuration directement dans demo.js, url : "/upload/UploadAction" mettez votre action de téléchargement d'image, ce contrôle n'est qu'un traitement de premier plan, vous devez écrire vous-même le téléchargement en arrière-plan

Recommandations associées :

PHP imite la fonction de prévisualisation et de téléchargement multi-images de WeChat

Exemple détaillé H5 de réalisation d'un téléchargement multi-images

Exemple de code pour PHP téléchargeant plusieurs fichiers et images

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!