So entwickeln Sie mit Layui eine Drag-and-Drop-Sortierungsfunktion zum Hochladen von Bildern

So entwickeln Sie mit Layui eine Drag-and-Drop-Sortierfunktion zum Hochladen von Bildern

Einführung:
Im heutigen Internetzeitalter ist das Hochladen von Bildern zu einem der häufigsten Bedürfnisse in unserem täglichen Leben geworden. Im eigentlichen Entwicklungsprozess kann die Drag-and-Drop-Sortierfunktion nicht nur das Benutzererlebnis beim Hochladen von Bildern verbessern, sondern auch die Sortierung von Bildern effektiv verwalten. Layui ist ein einfaches und benutzerfreundliches Front-End-UI-Framework, das auf Nodejs basiert. Es bietet leistungsstarke Funktionen und umfangreiche Stile und eignet sich sehr gut für die Entwicklung von Drag-and-Drop-Sortierfunktionen zum Hochladen von Bildern.

In diesem Artikel wird erläutert, wie Sie mit Layui eine Bild-Upload-Funktion zum Sortieren per Drag-and-Drop entwickeln und spezifische Codebeispiele bereitstellen, um die praktische Anwendung zu erleichtern.

1. Vorbereitung:
   Zuerst müssen wir sicherstellen, dass die relevanten Dateien von Layui eingeführt wurden. Im Code müssen wir die beiden Dateienlayui.js undlayui.css verwenden. Wenn diese Dateien noch nicht eingeführt wurden, können Sie sie von der offiziellen Website von Layui herunterladen und vorstellen.
2. HTML-Layout:
   Als nächstes müssen wir ein HTML-Layout durchführen und einen Bereich zum Anzeigen hochgeladener Bilder erstellen, einschließlich eines Div zum Anzeigen einer Liste hochgeladener Bilder und eines Bereichs zum Hochladen per Drag & Drop.

<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. CSS-Stile:
   Um die Seite zu verschönern und die Drag-and-Drop-Upload-Funktion zu implementieren, müssen wir einige CSS-Stile schreiben. Das Folgende ist ein Beispielstil:

.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. JavaScript-Code:
   Der letzte Schritt besteht darin, JavaScript-Code zu schreiben und dabei das Upload-Modul und die Drag-and-Drop-Funktion von Layui zu verwenden. Das Folgende ist ein Beispielcode:

<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>

Codebeschreibung:

• Führen Sie zunächst das Upload-Modul von Layui überlayui.use('upload', function(){...}) ein.
• Erstellen Sie im Upload-Modul eine Instanz über upload.render({...}), wobei elem das gebundene Element, url die Upload-Schnittstelle, data zusätzliche Parameter und multiple darstellt, ob das Hochladen mehrerer Dateien zulässig ist.
• In der Funktion „Fertig“ können Sie die Logik nach Abschluss des Uploads verwalten. In diesem Beispiel werden die Upload-Ergebnisse über console.log(res) gedruckt.
• Hören Sie sich in der Drag-and-Drop-Upload-Funktion die Dragover-, Dragleave- und Drop-Ereignisse an, implementieren Sie jeweils den Stilwechsel beim Ziehen der Datei in den Upload-Bereich, weisen Sie die gezogene Datei dem Element input[type="file"] zu, und rufen Sie schließlich uploadButton.click() auf, um den Upload-Vorgang auszulösen.
• Zeigen Sie abschließend das hochgeladene Bild über die Funktion uploadInst.config.done an. In diesem Beispiel erstellen wir ein img-Element und legen res.url als src dafür fest und fügen dann das Element zur uploadedList hinzu.

Zusammenfassung:
Es ist nicht schwierig, mit Layui eine Funktion zum Hochladen von Bildern per Drag-and-Drop zu entwickeln. Bereiten Sie einfach das entsprechende HTML-Layout, den CSS-Stil und den JavaScript-Code vor. Durch das Upload-Modul und die Drag-and-Drop-Funktion von Layui können wir Drag-and-Drop-Uploads einfach implementieren und hochgeladene Bilder anzeigen. Ich hoffe, dass mein Beitrag für Sie hilfreich sein kann. Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie mit Layui eine Drag-and-Drop-Sortierungsfunktion zum Hochladen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!