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

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

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!