JavaScriptドラッグ＆ドロップアップロード機能の実装と原理紹介

この記事では、JavaScript のドラッグ アンド ドロップ アップロード機能の実装と原理について説明します。必要な方は参考にしていただければ幸いです。

最近、Xiao Ming さんは、Web ページにファイルをアップロードすると、ページがクラッシュすることがありました。 Xiao Ming はこの状況を注意深くテストした結果、以前に使用していたファイル アップロード コンポーネントにいくつかの欠陥があることが判明したため、Xiao Ming は次のスタイルでファイル アップロード コンポーネントを自分で手書きすることにしました:

##図 1 はファイルがアップロードされていないときのスタイルを示し、図 2 はファイルをアップロードした後のスタイルを示します。点線の部分は配置領域です。まずコードを見てみましょう。

html part

<div>
    <div>
      <div>
        <div>{{ fileName }}</div>
        <div>
          <span>将文件拖拽至此，或</span>
          <label>点此上传</label>
        </div>
      </div>
    </div>

    <div>
      <input>
      <label>选择文件</label>

      <button>提交</button>
    </div>
  </div>

css part

    * {
      font-size: 14px;
    }
    .drag-area {
      height: 200px;
      width: 300px;
      border: dashed 1px gray;
      margin-bottom: 10px;
      color: #777;
    }
    .uploader-tips {
      text-align: center;
      height: 200px;
      line-height: 200px;
    }
    .file-name {
      text-align: center;
      height: 200px;
      line-height: 200px;
    }

js パート

    new Vue({
      el: '#app',
      data () {
        return {
          fileName: '',
          batchFile: '',
          MAX_FILE_SIZE: 10 * 1000 * 1000
        }
      },
      methods: {
        // 点击上传
        chooseUploadFile (e) {
          const file = e.target.files.item(0)

          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }

          this.batchFile = file
          this.fileName = file.name

          // 清空，防止上传后再上传没有反应
          e.target.value = ''
        },
        // 拖拽上传
        fileDragover (e) {
          e.preventDefault()
        },
        fileDrop (e) {
          e.preventDefault()
          const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象

          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }

          this.batchFile = file
          this.fileName = file.name
        },
        // 提交
        uploadOk () {
          if (this.batchFile === '') {
            return alert('请选择要上传的文件')
          }

          let data = new FormData()
          data.append('upfile', this.batchFile)

          // ajax
        }
      }
    })

核心原則の説明

• ドラッグオーバー アンド ドロップ イベント

# ここでお話しすべきことの 1 つは、ドラッグ アンド ドロップにおけるこれら 2 つのイベントです。これらの 2 つのイベントは、ドラッグ アンド ドロップ アップロードのコア機能をサポートしているからです。

ドラッグ アクションには、2 つの中心的な概念があります。1 つは

ドラッグ要素
、もう 1 つは 配置ターゲット です。ここでは、ドロップターゲット上のイベントについてのみ説明します。ドラッグ要素のイベントについては、自分で確認してください。 ターゲットを配置するにはどのようなイベントがありますか?次のとおりです。

要素が有効なドロップ ターゲット (上の例の点線の領域など) にドラッグされると、次のイベントが順番に発生します:

(1)ragenter
(2)dragover
(3) ドラッグリーブまたはドロップ
要素がドロップ ターゲットにドラッグされている限り、dragenter イベントがトリガーされます (mouseover イベントと同様)。ドラッグオーバー イベントがすぐに続き、ドラッグされた要素がドロップ ターゲット内で移動している間も発生し続けます。要素がドロップ ターゲットの外にドラッグされた場合、dragover イベントは発生しませんが、dragleave イベントが発生します (mouseout イベントと同様)。要素がドロップ ターゲットにドロップされると、dragleave イベントの代わりに Drop イベントが発生します。

この例では、ドラッグオーバー イベントとドロップ イベントにのみ注意する必要があります。ただし、ドロップ イベントを聞きたい場合は、いくつかの処理を行う必要があります。デフォルトでは、要素をドラッグして無効な配置ターゲットを通過すると、特殊なカーソル (円の中にバックスラッシュがあります) は、配置できないことを示します。

#ドラッグした要素が配置が許可されていない要素を通過した場合、ユーザーがどのように操作してもドロップイベントは発生しません。それではどうすればいいでしょうか？

上記のコード例の e.preventDefault() など、dragover イベントのデフォルトの動作をオーバーライドできます。

注意深い学生の皆さんは、drop イベントに e.preventDefault() もありますが、削除できますか? と尋ねるかもしれません。自分で試してみることもできます。

dataTransfer オブジェクト
このオブジェクトは少し奇妙に見えるかもしれませんが、その役割は小さくありません。たとえば、画像を対象領域にドラッグした場合、対象領域はどのようにして画像の情報を取得するのでしょうか。ただそれに頼ってください！これは、ドラッグされた要素からドロップ ターゲットにデータを文字列形式で渡すために使用されるイベント オブジェクトのプロパティです。この例では、これを使用して、ドラッグされているファイル情報を取得できます。

入力変更イベント
このイベントには実は落とし穴があります。つまり、同じファイルをアップロードすると、ファイルの内容が変更された場合でも、change イベントがトリガーされます。

考えると恐ろしいです!たとえば、ユーザーがドキュメントをアップロードしたいが、それを点線の領域にドラッグした後、変更が完了した後でドキュメントの内容を変更する必要があることが判明した場合、ドキュメントをドラッグしてサーバーに送信します。その後、彼がサーバーにアップロードしたドキュメントの内容は変更されていません。

したがって、ファイルがアップロードされるたびに変更イベントがトリガーされるように、リセット処理を実行するにはコード e.target.value = '' が必要です。

以上がJavaScriptドラッグ＆ドロップアップロード機能の実装と原理紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。