HTML5 파일 드래그 앤 드롭 업로드를 위한 샘플 코드 공유-H5 튜토리얼-php.cn

html5 파일의 드래그 앤 드롭 업로드는 오래된 주제입니다. 인터넷에 제가 원래 찾아서 수정한 코드도 많이 있습니다. 온라인이지만 피트를 몇 개 밟은 후 그 과정을 기록하고 싶었습니다.

기능 구현

다음은 브라우저 외부에서 파일을 브라우저로 드래그하여 업로드하는 구현을 주로 소개합니다. 먼저 몇 가지 필요한 기본 사항을 소개합니다.

드래그이벤트

드래그 이벤트에는 다음이 포함됩니다.

dragstart: 다음 경우에 실행됩니다. 사용자가 개체 를 드래그하기 시작합니다.
dragenter: 마우스가 처음으로 대상 요소 위로 지나가고 드래그가 발생할 때 트리거됩니다. 이 이벤트의 리스너는 이 위치에서 드롭이 허용되는지 여부를 나타내야 합니다. 또는 리스너가 어떤 작업도 수행하지 않으면 기본적으로 드롭이 허용되지 않습니다.
dragover: 마우스가 요소 위로 지나가고 드래그가 발생할 때 트리거됩니다.
dragleave: 마우스가 요소를 떠나 드래그가 발생할 때 트리거됩니다.
drag: 객체를 드래그할 때 마우스가 움직일 때마다 실행됩니다.
drop: 이 이벤트는 드래그 작업이 끝날 때 드롭이 발생할 때 요소에서 트리거됩니다. 리스너는 드래그된 데이터를 검색하고 드롭 위치에 삽입하는 역할을 담당해야 합니다.
dragend: 개체를 드래그하는 동안 마우스 버튼을 놓으면 트리거됩니다.

브라우저 외부에서 브라우저로 파일을 드래그할 때 바인딩해야 하는 이벤트는 dragover 및 다른 사람은 묶을 필요가 없습니다. dropdragover 및 drop 이벤트 처리 함수 는 이벤트의 <a href="http://www.php.cn/wiki/1074.html" target="_blank">이전 </a>entDefault()<a href="http://www.php.cn/wiki/1074.html" target="_blank">prev</a>entDefault() 함수를 사용하지 않으면 브라우저가 기본 처리를 수행합니다. 예를 들어 텍스트 유형의 파일이 직접 열리고 텍스트가 아닌 파일의 경우 다운로드 파일 상자가 나타날 수 있습니다.

DataTransfer 객체

드래그 객체는 드래그 이벤트

event.dataTransfer 를 통해 데이터를 전송하는 데 사용됩니다.

dataTransfer.dropEffect [ = value ]: 현재 선택된 작업 유형을 반환합니다. 선택한 작업을 수정하기 위해 새 값을 설정할 수 있습니다. 선택 값은 none, <a href="http://www.php.cn/wiki/1297.html" target="_blank">copy</a>, link, move 입니다.
dataTransfer.effectAllowed [ = value ]: 수정 가능한 허용된 작업 유형을 반환합니다. 선택 값은 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized 입니다.
dataTransfer.types: dragstart 이벤트에 설정된 모든 형식을 나열하는 DOMString을 반환합니다. 또한 드래그되는 파일이 있는 경우 유형 문자열 중 하나는 "Files"입니다.
dataTransfer.clearData( [ format ] ): 지정된 형식의 데이터를 제거합니다. 인수를 생략하면 모든 데이터가 제거됩니다.
dataTransfer.setData(format, data): 지정된 데이터를 추가합니다.
data = dataTransfer.getData(format): 지정된 데이터를 반환합니다. 해당 데이터가 없으면 빈 문자열이 반환됩니다.
dataTransfer.files: 드래그된 FileList가 있으면 반환합니다.
dataTransfer.setDragImage(element, x, y): 지정된 요소를 사용하여 드래그 피드백을 업데이트하고 이전에 지정된 피드백(피드백)을 대체합니다.
dataTransfer.addElement(element): 드래그 피드백을 렌더링하는 데 사용되는 요소 목록에 지정된 요소를 추가합니다.

이 사용 사례에서 가장 중요한 것은 dataTransfer.files 속성 입니다. 사용자가 드래그하는 브라우저의 파일 목록은 FileList 속성이 있는 length 개체이며 아래 첨자를 통해 액세스할 수 있습니다.

FormData

FormData 는 append('fieldName', value)을 통해 양식에 추가할 수 있는 양식을 나타냅니다. 함수 문자열뿐만 아니라 파일 객체 또는 바이너리 데이터도 될 수 있는 매개변수를 추가합니다.

XMLHttpRequest 레벨 2

XMLHttpRequest 객체의 새 버전 여기에 언급된 XMLHttpRequest는 새 버전을 나타냅니다.

XMLHttpRequest는 다른 도메인 이름을 가진 서버에 HTTP 요청을 할 수 있습니다. 이를 "교차 출처 리소스 공유, CORS라고도 함)라고 합니다.

브라우저에는 브라우저 보안의 기초가 되는 유명한 동일 출처 정책이 있습니다. 이는 브라우저 지원 외에도 서버 동의도 필요합니다.

XMLHttpRequest는 브라우저가 양식 제출을 수행하는 것처럼 FormData 직접 전송을 지원합니다.

XMLHttpRequest는 진행 정보(progress 이벤트)도 지원합니다. 진행은 업로드 진행과 다운로드 진행으로 구분됩니다. 업로드 진행 이벤트는 XMLHttpRequest.upload 에 있습니다. object , 다운로드 진행 이벤트는 XMLHttpRequest 개체에 있습니다. 각 진행 이벤트에는 세 가지 속성이 있습니다.

lengthComputable: 업로드된 셀 수 있는 바이트 수
total: 총 바이트 수
loaded: 현재까지 업로드된 바이트 수

진행 이벤트 외에도 다음 5가지 이벤트도 지원됩니다.

load이벤트: 전송이 성공적으로 완료되었습니다.
abort이벤트: 사용자가 이체를 취소했습니다.
error이벤트: 전송 중 오류가 발생했습니다.
loadstart이벤트: 전송이 시작됩니다.
loadend이벤트 : 전송이 완료되었으나 성공/실패 여부를 알 수 없습니다.

은 progress 이벤트와 동일하며 업로드 작업에 속하는 이벤트 처리 기능은 XMLHttpRequest.upload 객체에 바인딩되어 있습니다. 속성 다운로드는 XMLHttpRequest 객체에 직접 바인딩됩니다.

특정 코드

자신의 컴퓨터에서 테스트할 때 아래 코드의 경로를 자신의 것으로 변경하도록 주의하세요.

서버측

업로드된 양식을 수신하려면 서버측에서 서블릿을 작성해야 합니다. /html5/FileUploadServlet

servlet3의 @MultipartConfig 주석을 사용하면 빠르게 구현할 수 있습니다.

클라이언트 코드

<html>
<head>
<title> drag drop upload demo
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
       <p id= "progressBarZone">请将文件拖拽进浏览器内！ <br/></ p>
</body>

<script>
var progressBarZone = document.getElementById(&#39;progressBarZone&#39;);

function sendFile(files) {
       if (!files || files.length < 1) {
             return;
      }
      
       var percent = document.createElement(&#39;p&#39; );
      progressBarZone.appendChild(percent);

       var formData = new FormData();             // 创建一个表单对象FormData
      formData.append( &#39;submit&#39;, &#39;中文&#39; );  // 往表单对象添加文本字段
      
       var fileNames = &#39;&#39; ;
      
       for ( var i = 0; i < files.length; i++) {
             var file = files[i];    // file 对象有 name, size 属性
            
            formData.append( &#39;file[&#39; + i + &#39;]&#39; , file);       // 往FormData对象添加File对象
            
            fileNames += &#39;《&#39; + file.name + &#39;》， &#39; ;
      }
      
       var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener( &#39;progress&#39;,
             function uploadProgress(evt) {
                   // evt 有三个属性：
                   // lengthComputable – 可计算的已上传字节数
                   // total – 总的字节数
                   // loaded – 到目前为止上传的字节数
                   if (evt.lengthComputable) {
    percent.innerHTML = fileNames + &#39; upload percent :&#39; + Math.round((evt.loaded / evt.total)  * 100) + &#39;%
&#39; ;
                  }
            }, false); // false表示在事件冒泡阶段处理

      xhr.upload.onload = function() {
            percent.innerHTML = fileNames + &#39;上传完成。

&#39; ;
      };

      xhr.upload.onerror = function(e) {
            percent.innerHTML = fileNames + &#39; 上传失败。

&#39; ;
      };

      xhr.open( &#39;post&#39;, &#39;http://cross.site.com:8080/html5/FileUploadServlet&#39; , true);
      xhr.send(formData);            
      // 发送表单对象。
}

document.addEventListener("dragover", function(e) {
      e.stopPropagation();
      e.preventDefault();            
      // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
}, false);

document.addEventListener("drop", function(e) {
      e.stopPropagation();
      e.preventDefault();            
      // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。

      sendFile(e.dataTransfer.files);
}, false);
</script>
</html>

로그인 후 복사

위의 코드가 모두 동일한 사이트에 배포된다면 문제가 없습니다. 그런데 제가 하려는 업로드 작업은 파일을 다른 웹사이트로 옮기는 것이므로 함정이 발생합니다.

위 내용은 HTML5 파일 드래그 앤 드롭 업로드를 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!