简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

JS makes file drag and drop function

php中世界最好的语言
Release： 2018-06-12 14:50:58
Original
1036 people have browsed it

This time I will bring you the file drag and drop function using JS. What are the precautions for using JS to drag and drop files? The following is a practical case, let’s take a look.

1. Rendering:

2. Source code

<%@ 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>
Copy after login

I believe you have mastered the method after reading the case in this article, and there will be more exciting things Please pay attention to other related articles on php Chinese website!

Recommended reading:

Use postman json springmvc to make batch additions

How to use js to store keys in the project value

The above is the detailed content of JS makes file drag and drop function. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
js文件拖拽事件 js文件拖拽 js拖拽事件
source：php.cn
Previous article：How to apply vue global and local components in the project Next article：How to use VUE2.X filters
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Best way to preload route data before accessing the route. Before rendering the page for a given route, I want to first get the necessary data synchr...
From 2023-11-17 14:54:42
0
2
379
Catching Guzzle exceptions I'm trying to catch exceptions in a set of tests running on an API I'm developing, and I'm...
From 2023-11-16 14:36:03
0
12
290
Livewire undefined I'm having trouble deploying my LaravelLivewire project to the server. The problem is that...
From 2023-11-09 15:34:23
0
1
233
What are the performance numbers next to components in the Vue dev tools? Does anyone have insights or resources for a certain feature in the Vue development tools?...
From 2023-11-09 14:46:48
0
1
305
How to roll back to PHP version 8.1: Docker phpdockerio/php:8.1-fpm build uses PHP version 8.2 I'm running my project on a PHP-FPM docker container (details of the config file below). W...
From 2023-11-05 09:52:26
0
1
282
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！