Comment utiliser Layui pour développer une fonction de téléchargement d'images de tri par glisser-déposer

Comment utiliser Layui pour développer une fonction de téléchargement d'images par glisser-déposer

Introduction :
À l'ère d'Internet d'aujourd'hui, le téléchargement d'images est devenu l'un des besoins courants dans notre vie quotidienne. Dans le processus de développement actuel, la fonction de tri par glisser-déposer peut non seulement améliorer l'expérience utilisateur pour le téléchargement d'images, mais également gérer efficacement le tri des images. Layui est un framework d'interface utilisateur frontal simple et facile à utiliser basé sur Nodejs. Il fournit des fonctions puissantes et des styles riches, et est très approprié pour développer des fonctions de téléchargement d'images de tri par glisser-déposer.

Cet article expliquera comment utiliser Layui pour développer une fonction de téléchargement d'images de tri par glisser-déposer et fournira des exemples de code spécifiques pour faciliter l'application pratique.

1. Préparation :
   Tout d'abord, nous devons nous assurer que les fichiers pertinents de Layui ont été introduits. Dans le code, nous devons utiliser les deux fichiers layui.js et layui.css. Si ces fichiers n'ont pas été introduits, vous pouvez les télécharger et les introduire depuis le site officiel de Layui.
2. Mise en page HTML :
   Ensuite, nous devons effectuer une mise en page HTML et créer une zone pour afficher les images téléchargées, y compris un div pour afficher une liste d'images téléchargées et une zone pour le téléchargement par glisser-déposer.

<div class="upload-container">
  <div class="uploaded-list" id="uploaded-list"></div>
  <div class="drop-area">
    <div class="drop-text">将图片拖拽到此处上传</div>
    <div class="upload-button">点击上传图片</div>
    <input type="file" id="file-input" multiple="multiple" style="display: none;">
  </div>
</div>

3. Styles CSS :
   Afin d'embellir la page et d'implémenter la fonction de téléchargement par glisser-déposer, nous devons écrire des styles CSS. Voici un exemple de style :

.upload-container {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.uploaded-list {
  margin-bottom: 20px;
}

.drop-area {
  border: 1px dashed #ccc;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #f7f7f7;
  cursor: pointer;
  position: relative;
}

.drop-text {
  color: #999;
}

.upload-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: none;
}

.upload-button:hover {
  background: rgba(0, 0, 0, 0.7);
}

4. Code JavaScript :
   La dernière étape consiste à écrire du code JavaScript, à l'aide du module de téléchargement de Layui et de la fonctionnalité glisser-déposer. Voici un exemple de code :

<script>
layui.use('upload', function(){
  var upload = layui.upload;

  //执行实例
  var uploadInst = upload.render({
    elem: '#file-input', //绑定元素
    url: '/upload', //上传接口
    data: {}, //可选项，额外的参数
    multiple: true, //是否允许多文件上传
    done: function(res){
      //上传完毕回调
      console.log(res);
    },
    error: function(){
      //请求异常回调
    }
  });

  //拖拽上传
  var dropArea = document.querySelector('.drop-area');
  var uploadButton = document.querySelector('.upload-button');
  var fileInput = document.querySelector('#file-input');

  dropArea.addEventListener('dragover', function(e) {
    e.preventDefault();
    this.classList.add('highlight');
  });

  dropArea.addEventListener('dragleave', function(e) {
    e.preventDefault();
    this.classList.remove('highlight');
  });

  dropArea.addEventListener('drop', function(e) {
    e.preventDefault();
    this.classList.remove('highlight');
    fileInput.files = e.dataTransfer.files;
    uploadButton.click();
  });

  //显示已上传的图片
  uploadInst.config.done = function(res) {
    var uploadedList = document.querySelector('.uploaded-list');
    var img = document.createElement('img');
    img.src = res.url;
    uploadedList.appendChild(img);
  };
});
</script>

Description du code :

• Tout d'abord, présentez le module de téléchargement de Layui via layui.use('upload', function(){...}).
• Dans le module de téléchargement, créez une instance via upload.render({...}), où elem représente l'élément lié, url représente l'interface de téléchargement, data représente des paramètres supplémentaires et multiple représente si plusieurs téléchargements de fichiers sont autorisés.
• Dans la fonction de rappel terminé, vous pouvez gérer la logique une fois le téléchargement terminé. Dans cet exemple, les résultats du téléchargement sont imprimés via console.log(res).
• Dans la fonction de téléchargement par glisser-déposer, écoutez les événements dragover, dragleave et drop, implémentez respectivement le changement de style lorsque vous faites glisser le fichier vers la zone de téléchargement, attribuez le fichier glissé à l'élément input[type="file"], et enfin appelez uploadButton.click() pour déclencher l'opération de téléchargement.
• Enfin, affichez l'image téléchargée via la fonction uploadInst.config.done. Dans cet exemple, nous créons un élément img et définissons res.url comme src pour celui-ci, puis ajoutons l'élément à la liste téléchargée.

Résumé :
Il n'est pas difficile d'utiliser Layui pour développer une fonction de téléchargement d'images de tri par glisser-déposer. Préparez simplement la mise en page HTML, le style CSS et le code JavaScript correspondants. Grâce au module de téléchargement et à la fonction glisser-déposer de Layui, nous pouvons facilement implémenter le téléchargement par glisser-déposer et afficher les images téléchargées. J'espère que mon partage pourra vous être utile, merci d'avoir lu !

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!