简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JS는 파일 드래그 앤 드롭 기능을 만듭니다.

php中世界最好的语言
풀어 주다： 2018-06-12 14:50:58
원래의
1076명이 탐색했습니다.

이번에는 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>
로그인 후 복사

이 기사의 사례를 읽으신 후에는 PHP 중국어 웹사이트의 다른 관련 기사를 참고하시기 바랍니다. !

추천 자료:

postman+json+springmvc를 사용하여 일괄 추가하기

js를 사용하여 프로젝트에 키 값을 저장하는 방법

위 내용은 JS는 파일 드래그 앤 드롭 기능을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
js文件拖拽事件 js文件拖拽 js拖拽事件
원천：php.cn
이전 기사：프로젝트에 Vue 글로벌 및 로컬 구성 요소를 적용하는 방법 다음 기사：VUE2.X 필터를 사용하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
window.location.href를 사용하여 새 페이지로 리디렉션할 때의 문제 로컬 도메인 PHP 파일로 리디렉션하는 데 문제가 있습니다. thanks.php로 리디렉션할 준비가 되어 있습니다. 이 작업을 수행할 수 있는 코드에 누락된 것이...
에서 2024-04-04 12:57:06
0
1
446
Angular 애플리케이션에서 Javascript 프로토타입 생성자를 가져올 때 오류가 발생합니다. 생성자가 있는 JS 파일을 가져오려고 하는 Angular 애플리케이션이 있습니다. 하지만 애플리케이션을 실행하면 webpack에서 오류가 발생합니다. 자산의 Ja...
에서 2024-04-04 11:36:15
0
1
288
애플리케이션의 모든 관리자에게 사용자 정의 "css" 및 "js" 파일을 효과적으로 적용하는 방법은 무엇입니까? 사용자 정의 CSS 및 js 파일인 admin.py와 재정의된 base.html이 template/admin/app1/에 다음과 같이 있습니다: django-pr...
에서 2024-04-03 20:54:06
0
1
400
3. JS 3D 모델이 추가되었으나 보이지 않습니다. 내 웹사이트에 3D 모델을 추가하려고 합니다. 저는 세 개의 .js를 사용하고 있습니다. 모든 것을 시도했지만 3D 모델을 표시할 수 없었습니다. 개발자 도구의 ...
에서 2024-04-03 19:06:13
0
1
264
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！