집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 파일을 끌어서 놓는 방법

JavaScript에서 파일을 끌어서 놓는 방법

不言원래의: 2018-12-01 11:13:402685검색

JavaScript에서 파일을 끌어서 놓는 방법를 사용하여 파일을 드래그 앤 드롭하는 방법은 무엇인가요? 이번 글에서는 자바스크립트를 이용해 드래그 앤 드롭으로 파일을 선택하는 방법을 소개하겠습니다. 구체적인 내용을 살펴보겠습니다.

예제를 살펴보겠습니다

코드는 다음과 같습니다

SimpleDragDrop. html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function handleFileSelect(evt) {
      evt.stopPropagation();
      evt.preventDefault();      
var files = evt.dataTransfer.files; 
      var output = [];      
for (var i = 0; i < files.length; i++) {
        document.getElementById(&#39;output&#39;).innerHTML += files[i].name + &#39;(&#39; + files[i].size + &#39;) &#39;
          + files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() +  &#39; - &#39; + files[i].type + &#39;<br/>&#39;;
      }
    }    
function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = &#39;copy&#39;;
    }    
    function PageLoad(evt) {      
var dropFrame = document.getElementById(&#39;DropFrame&#39;);
      dropFrame.addEventListener(&#39;dragover&#39;, handleDragOver, false);
      dropFrame.addEventListener(&#39;drop&#39;, handleFileSelect, false);
    }  
</script>
</head>
<body onload="PageLoad();">
  <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">把文件放在这里。</div>
  <div id="output"></div>
</body>
</html>

Instructions:

페이지를 표시한 후 onload 이벤트의 PageLoad() 함수를 실행합니다.
document.getElementById()를 호출하여 드래그 앤 드롭을 허용하는 영역의 요소를 가져옵니다. 이 시간 동안 드래그 앤 드롭 작업을 허용하도록 "DropFrame" ID의 Div 태그 부분을 설정합니다. 획득한 요소의 addEventListener() 메소드를 호출하고 'dragover' 및 'drop' 이벤트를 추가합니다. 위 코드에서는 'dragover' 이벤트가 발생하면 handlerDragOver() 함수가 실행되고, 'drop' 이벤트가 발생하면 DrawOver에서

Execute가 실행됩니다. 다음 코드는
stopPropagation, PreventDefault가 기존 동작을 취소합니다. 또한 dataTransfer.dropEffect 속성에 결과 유형을 지정합니다.

🎜🎜#Drop 활동에서 실행되는 코드는 다음과 같습니다. 첫 번째 매개변수(다음 코드의 evt)는 파일 목록을 삭제하고 저장합니다. 파일 선택 상자와 동일한 방식으로 정렬된 요소에 액세스하여 파일을 얻고 파일 이름과 크기 속성이 이름에 저장됩니다. attribute., 파일 크기, lastmdifitifielDato의 업데이트 시간

얻은 값을 id = outpud

Drop 이벤트에서 실행된 코드는 다음과 같습니다. 하나의 매개변수(다음 코드에서는 evt)가 있는 ddataTransfer.files는 파일 목록을 삭제하고 저장합니다. 파일 획득의 경우 파일 선택 상자와 같은 배열 요소에 액세스하여 파일 이름을 가져옵니다. name 속성에 파일 크기가 저장되고, lastModifiedDate에 업데이트 날짜가 저장됩니다.

얻은 값을 id = outpud

 function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = &#39;copy&#39;;
    }

#로 표시된 영역에 출력합니다. 🎜🎜#실행 결과

#🎜 🎜#

이 HTML 파일을 실행하면 아래에 표시된 효과가 표시됩니다. 탐색기에서 파일을 끌어다 놓습니다. 파일 이름, 파일 크기, 마지막 업데이트 시간, MIS 유형이 표시됩니다. 🎜🎜#

여러 파일을 선택하여 한 번에 표시하면 여러 개의 드래그 앤 드롭 정보가 표시됩니다. 🎜🎜#Addition: addEventListener()

 function handleFileSelect(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      var files = evt.dataTransfer.files; 
      var output = [];      
 for (var i = 0; i < files.length; i++) {
         document.getElementById(&#39;output&#39;).innerHTML += files[i].name + &#39;(&#39; + files[i].size + &#39;) &#39;
          + files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() +  &#39; - &#39; + files[i].type + &#39;<br/>&#39;;
      }
    }

를 사용하지 않고 태그에 "ondragover" 및 "ondrop" 속성을 구현하는 구현 방법도 있습니다.

위 내용은 JavaScript에서 파일을 끌어서 놓는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Backbone.js를 사용하여 간단한 뷰를 만드는 방법다음 기사：Backbone.js를 사용하여 간단한 뷰를 만드는 방법