Maison > interface Web > Tutoriel H5 > le corps du texte

h5 implémente plusieurs téléchargements d'aperçus d'images et des contrôles cliquer-glisser

php中世界最好的语言
Libérer: 2018-03-20 13:29:50
original
3273 Les gens l'ont consulté

Cette fois, je vous proposerai h5 pour implémenter l'aperçu multi-images télécharger et les contrôles cliquer pour faire glisser h5 pour implémenter le téléchargement d'aperçu multi-images et les contrôles cliquer pour faire glisser Notes. Oui Lesquels, les suivants sont des cas pratiques, jetons un oeil.

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 l'image, ou vous pouvez la faire glisser vers la zone de téléchargement et la télécharger directement. est pratique, facile à utiliser et l'interface est également bonne. Elle est simple et peut essentiellement ê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" et 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

Je crois que vous avez lu. C'est le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php pour un contenu plus passionnant !

Lecture recommandée :

Comment l'alignement du texte permet d'obtenir un alignement aux deux extrémités

Comment résoudre le problème de l'affichage incomplet de saisie de texte Android

Héritage JavaScript et chaîne de prototypes

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