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

JS做出文件拖拽功能

php中世界最好的语言
Lepaskan： 2018-06-12 14:50:58
asal
1080 orang telah melayarinya

这次给大家带来JS做出文件拖拽功能，JS做出文件拖拽功能的注意事项有哪些，下面就是实战案例，一起来看一下。

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用postman+json+springmvc做出批量添加

如何在项目中使用js中存储键值

Atas ialah kandungan terperinci JS做出文件拖拽功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
js文件拖拽事件 js文件拖拽 js拖拽事件
sumber：php.cn
Artikel sebelumnya：如何在项目中应用vue全局与局部组件 Artikel seterusnya：如何使用VUE2.X过滤器
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
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Cabaran apabila menggunakan window.location.href untuk mengubah hala ke halaman baharu Saya menghadapi masalah mengubah hala ke fail php domain tempatan, saya telah menyediakann...
daripada 2024-04-04 12:57:06
0
1
446
Ralat dilemparkan apabila mengimport pembina prototaip Javascript dalam aplikasi Angular Saya mempunyai aplikasi Angular di mana saya cuba mengimport fail JS yang mempunyai pembin...
daripada 2024-04-04 11:36:15
0
1
288
Bagaimana untuk menggunakan fail "css" dan "js" tersuai dengan berkesan kepada semua pentadbir dalam aplikasi? Saya mempunyai fail css dan js tersuai, admin.py dan overridden base.html terletak dalam t...
daripada 2024-04-03 20:54:06
0
1
400
3. Model JS 3D telah ditambahkan tetapi tidak kelihatan Saya cuba menambah model 3D pada tapak web saya. Saya menggunakan tiga .js. Saya mencuba s...
daripada 2024-04-03 19:06:13
0
1
264
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！