Maison > interface Web > Tutoriel H5 > Partage d'exemples de téléchargement d'aperçus multi-images HTML5 et de contrôles cliquer-glisser

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

小云云
Libérer: 2018-03-16 10:43:05
original
3406 Les gens l'ont consulté

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);  
        }  
    });  
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal