Layuiを使ってドラッグ＆ドロップで仕分け画像アップロード機能を開発する方法

Layui を使用してドラッグ アンド ドロップの並べ替え画像アップロード機能を開発する方法

はじめに:
今日のインターネット時代では、画像のアップロードは一部となっています。私たちの日常生活に共通する要件の 1 つ。実際の開発プロセスでは、ドラッグ アンド ドロップの並べ替え機能は、画像アップロードのユーザー エクスペリエンスを向上させるだけでなく、画像の並べ替えを効果的に管理することもできます。 Layui は、Nodejs をベースにしたシンプルで使いやすいフロントエンド UI フレームワークで、強力な機能と豊富なスタイルを提供し、ドラッグ アンド ドロップによる並べ替え画像アップロード機能の開発に非常に適しています。

この記事では、Layui を使用してドラッグ アンド ドロップの並べ替え画像アップロード機能を開発する方法を紹介し、実用化を容易にする具体的なコード例を示します。

1. 準備:
   まず、Layui の関連ファイルが導入されていることを確認する必要があります。コードでは、layui.js とlayui.css の 2 つのファイルを使用する必要があります。これらのファイルが導入されていない場合は、Layui公式サイトからダウンロードして導入できます。
2. HTML レイアウト:
   次に、HTML レイアウトを実行し、アップロードされた画像のリストを表示する div とドラッグ アンド ドロップ アップロード領域用の div を含む、アップロードされた画像を表示する領域を作成する必要があります。

<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 スタイル:
   ページを美しくし、ドラッグ アンド ドロップによるアップロード機能を実装するには、いくつかの CSS スタイルを記述する必要があります。以下はサンプル スタイルです:

.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 コード:
   最後のステップは、Layui のアップロード モジュールとドラッグ アンド ドロップ機能を使用して JavaScript コードを作成することです。以下はサンプルコードです:

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

コードの説明:

• まず、layui.use('upload', function(){...} を通じて Layui を導入します。 ) モジュールをアップロードします。
• アップロード モジュールで、upload.render({...}) を通じてインスタンスを作成します。ここで、elem はバインドされた要素を表し、url はアップロード インターフェイスを表し、data は追加のパラメーターを表し、multiple は、それがバインドされているかどうかを表します。複数のファイルのアップロード。
• done コールバック関数では、アップロード完了後のロジックを処理できます。この例では、アップロード結果は console.log(res) を通じて出力されます。
• ドラッグアンドドロップアップロード機能において、dragover、dragleave、dropイベントを監視し、それぞれアップロード領域にファイルをドラッグした際のスタイル切り替えを実装し、ドラッグしたファイルをinput[type="file"]要素に代入するそして最後に、uploadButton.click() を呼び出してアップロード操作をトリガーします。
• 最後に、uploadInst.config.done 関数を使用して、アップロードされた画像を表示します。この例では、img 要素を作成し、その src として res.url を設定し、その要素をuploadedList に追加します。

要約:
Layui を使用してドラッグ アンド ドロップの並べ替え画像アップロード機能を開発することは難しくなく、対応する HTML レイアウト、CSS スタイル、および JavaScript コードを準備するだけです。 Layui のアップロード モジュールとドラッグ アンド ドロップ機能を使用すると、ドラッグ アンド ドロップ アップロードを簡単に実装し、アップロードされた画像を表示できます。私の共有があなたのお役に立てば幸いです。読んでいただきありがとうございます!

以上がLayuiを使ってドラッグ＆ドロップで仕分け画像アップロード機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。