狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【JavaScript】純JS實現文件拖拽上傳功能

admin
2023年10月30日 11:9 本文熱度 709

導讀

文件拖拽上傳功能現在已經隨處可見,大家應該都用過了吧,那么它具體是怎么實現的大家有去了解過嗎?今天我們一起來實現一下這個功能,并封裝一個拖拽上傳組件吧。


效果展示

image.png

體驗地址:http://jyeontu.xyz/jvuewheel/#/JDragUploadView

功能實現

原生JavaScrip實現

首先我們應該先將頁面寫好:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>點擊或拖拽上傳并顯示圖片</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
      }
      h1 {
        text-align: center;
      }
      #drop-zone {
        width300px;
        height200px;
        border2px dashed #ccc;
        margin20px auto;
        text-align: center;
        line-height200px;
        font-size18px;
      }
      #uploaded-image {
        max-width300px;
        max-height300px;
        margin20px auto;
      }
    
</style>
  </head>
  <body>
    <h1>點擊或拖拽上傳并顯示圖片示例</h1>
    <div id="drop-zone">點擊或拖拽上傳圖片</div>
    <img id="uploaded-image" src="" alt="上傳的圖片" />
    <script>
    </script>
  </body>
</html>

image.png

我們試下直接拖拽圖片到頁面上是什么效果

AI改圖-2023-09-23-21-43-40-720x405.gif

我們發現直接將圖片拖拽到頁面上會在新頁面打開圖片,那么我們需要阻止這一個默認行為以允許放置,頁面的拖拽行為主要會觸發以下幾個事件:

dragenter

dragenter 事件在可拖動的元素或者被選擇的文本進入一個有效的放置目標時觸發。

目標對象是用戶直接選擇的范圍(由用戶直接指示作為放置目標的元素),或者 <body> 元素。

dragleave

dragleave 事件在拖動的元素或選中的文本離開一個有效的放置目標時被觸發。

此事件不可取消。

dragover

dragover 事件在可拖動的元素或者被選擇的文本被拖進一個有效的放置目標時(每幾百毫秒)觸發。

該事件在放置目標上觸發。

drop

drag 事件在用戶拖動元素或選擇的文本時,每隔幾百毫秒就會被觸發一次。

效果實現

獲取上傳框和預覽框元素
const dropZone = document.getElementById("drop-zone");
const uploadedImage = document.getElementById("uploaded-image");
圖片進入上傳框時,為上傳框加一層灰色蒙層

監聽上傳框的dragenter事件,在圖片移動進入上傳框時改變上傳框的背景顏色。

dropZone.addEventListener("dragenter"function (event{
    dropZone.style.backgroundColor = "#f7f7f7";
});
圖片離開上傳框時,去除上傳框的灰色蒙層

監聽上傳框的dragleave事件,在圖片移出上傳框時去除上傳框的背景顏色。

dropZone.addEventListener("dragleave"function (event{
    dropZone.style.backgroundColor = "";
});
阻止瀏覽器默認行為,例如打開文件

dragoverdrop事件都會觸發瀏覽器打開文件,我們需要阻止其默認行為。

dropZone.addEventListener("dragover"function (event{
    event.preventDefault();
});
dropZone.addEventListener("drop"function (event{
    event.preventDefault();
});
獲取拖拽上傳的文件

拖拽釋放會觸發drop事件,我們只需要監聽drop事件,獲取到拖拽的文件列表event.dataTransfer.files即可。

dropZone.addEventListener("drop"function (event{
    event.preventDefault();
    dropZone.style.backgroundColor = "";
    const file = event.dataTransfer.files[0];
    handleFile(file);
});
處理上傳文件,為圖片時設置預覽圖

判斷上傳的文件是否為圖片,我們只需要判斷上傳文件的type是否為image開頭,是的話我們可以將其轉為dataUrl文件并設置預覽。

  function handleFile(file{
    if (file && file.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = function (event{
        uploadedImage.src = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  }

封裝為vue組件

知道了原生js實現一個拖拽上傳功能之后,我們也能很容易得將其封裝成一個vue組件。

監聽拖拽事件

在vue中,我們直接通過@dragover@dragleave@drop即可監聽元素的拖拽事件。

<div
    class="upload-area"
    @dragover.prevent="handleDragOver"
    @dragleave="handleDragLeave"
    @drop.prevent="handledrop"
    @click="handleUploadClick"
>

    <p v-if="!isDragging" class="tip-text">{{ tipText }}</p>
    <p v-else>{{ tipConfirmText }}</p>
</div>

事件的處理邏輯和原生js其實都是一樣的。

methods: {
    handleDragOver(event) {
        event.preventDefault();
        this.isDragging = true;
    },
    handleDragLeave() {
        this.isDragging = false;
    },
    handledrop(event) {
        event.preventDefault();
        this.isDragging = false;
        const file = event.dataTransfer.files[0];
        this.uploadFile(file);
    }
}

獲取到上傳文件并傳遞給父組件

獲取到上傳的文件后,我們不應該組件內直接處理文件了,將其傳遞給父組件進行處理即可。

uploadFile(file) {
    this.$emit("uploadFile", file);
}

組件完整代碼

功能邏輯與原生JavaScrip基本相同,這里也不重復描述了,直接看代碼吧:

<template>
    <div class="drag-upload">
        <div
            class="upload-area"
            @dragover.prevent="handleDragOver"
            @dragleave="handleDragLeave"
            @drop.prevent="handledrop"
            @click="handleUploadClick"
        >

            <p v-if="!isDragging" class="tip-text">{{ tipText }}</p>
            <p v-else>{{ tipConfirmText }}</p>
        </div>
        <input
            type="file"
            ref="fileInput"
            style="display: none"
            @change="handleFileselected"
        />

    </div>

</template>

<script>
export default {
    name: "JDragUpload",
    props: {
        tipText: {
            type: String,
            default: "將文件拖放到此處或點擊上傳",
        },
        tipConfirmText: {
            type: String,
            default: "釋放文件以上傳",
        },
    },
    data() {
        return {
            isDragging: false,
        };
    },
    methods: {
        handleDragOver(event) {
            event.preventDefault();
            this.isDragging = true;
        },
        handleDragLeave() {
            this.isDragging = false;
        },
        handledrop(event) {
            event.preventDefault();
            this.isDragging = false;
            const file = event.dataTransfer.files[0];
            this.uploadFile(file);
        },
        handleUploadClick() {
            this.$refs.fileInput.click();
        },
        handleFileselected() {
            const file = this.$refs.fileInput.files[0];
            this.uploadFile(file);
        },
        uploadFile(file) {
            this.$emit("uploadFile", file);
        },
    },
};
</
script>

<style lang="less" scoped>
.drag-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border: 2px dashed #ccc;
    .upload-area {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        background-color: #f0f0f0;
        cursor: pointer;
        .tip-text {
            text-align: center;
        }
    }
}
</style>

image.png

源碼

組件體驗及文檔地址:http://jyeontu.xyz/jvuewheel/#/JDragUploadView

Gitee源碼:https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/JYeontuComponentWarehouse/packages/JDragUpload


該文章在 2023/10/30 11:09:45 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved