简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

javascript实现文件拖拽事件的代码

小云云
Lepaskan： 2018-03-30 09:20:58
asal
1386 orang telah melayarinya

本文主要为大家详细介绍了javascript实现文件拖拽事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

1.效果图：

2.源码


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <style type="text/css">
    #p1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drop(ev) {
      ev.preventDefault();
      console.log(ev.dataTransfer.files);
    }
  </script>
</head>
<body>

<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">将文件拖放到此处</p>

</body>
</html>
Salin selepas log masuk

相关推荐：

js实现拖拽事件的方法实例

JavaScript鼠标拖拽事件实现的案例

微信小程序 实现拖拽事件监听实例详解

Atas ialah kandungan terperinci javascript实现文件拖拽事件的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
javascript js 代码
sumber：php.cn
Artikel sebelumnya：正则表达式教程的位置匹配教程（附代码） Artikel seterusnya：如何使用正则来查找lookaround
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Strim data daripada API OpenAI menggunakan AJAX, PHP dan acara yang dihantar oleh pelayan Bagaimanakah saya boleh menggunakan Acara Dihantar Pelayan (SSE) untuk menstrim data darip...
daripada 2023-11-11 12:03:23
0
1
497
Ralat Jenis Tidak Ditangkap: Tidak dapat menetapkan sifat yang tidak ditentukan (tetapkan 'innerHTML') Saya cuba membuat halaman web menggunakan php, pada elemen kelas "Continuous TextBox&...
daripada 2023-11-08 21:06:09
0
1
278
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Mengapa begitu banyak skrip JavaScript menambahkan nombor rawak pada sesuatu? perlanggaran? Saya telah mempelajari JavaScript sejak kebelakangan ini dan telah melihat banyak contoh p...
daripada 2023-11-04 20:00:04
0
2
296
Kenal pasti had prestasi dalam JavaScript Saya cuba mencari kesesakan dalam Javascript saya. Pada asasnya saya sedang membangunkan s...
daripada 2023-10-31 20:47:17
0
1
229
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！