html5 드래그 앤 드롭 파일 업로드에 대한 자세한 설명 : 클라이언트 파일 처리 및 비동기 서버 업로드

코어 포인트 How to Use HTML5 File Drag and Drop

html5는 웹 페이지 요소에서 파일을 드래그하고 삭제하고 javaScript의 드래그 앤 드롭 파일을 클라이언트의 파일로드 및 구문 분석하고 XMLHTTPREQUEST2를 사용하여 서버에 비동기로 파일을 업로드하고 업로드하는 동안 그래픽 진행을 표시합니다 . 최신 HTML5 기술의 사용으로 인해 브라우저 지원이 고르지 않을 수 있습니다. Firefox 및 Chrome의 현재 버전은 모든 기능을 지원하는 반면 Opera, IE 및 Safari 지원은 제한되거나 전혀 지원되지 않습니다. 파일 드래그 앤 드롭을 활성화하려면 파일 입력 요소 및 #FiLedRag 요소에 javaScript 이벤트가 첨부되어야합니다. #FiLedRag 요소도 표시되고 양식 제출 버튼을 숨겨야합니다.

W3C 파일 API는 FilleList, File 및 FilEReader를 포함한 파일 작업에 대한 일부 객체를 제공합니다.이 파일, 개별 파일을 나타내는 배열 및 클라이언트의 파일 데이터를 각각 사용하여 JavaScript로 사용합니다.

브라우저로 데스크탑 파일을 드래그 앤 드롭은 웹 애플리케이션 통합의 궁극적 인 목표 중 하나입니다. 이것은 4 부분으로 구성된 기사의 첫 번째 부분입니다. 1. 웹 요소에서 드래그 앤 드롭 파일을 사용하십시오. 4. xmlhttprequest2를 사용하여 파일을 비동기로 사용하십시오 .

시작하기 전에이 자습서에는 최신 HTML5 기술이 포함되므로 지원이 고르지 않을 것으로 예상됩니다. 코드는 이제 작동하지만 API가 변경 될 수 있고 브라우저는 계속 발전합니다. - 최신 버전의 Firefox 및 Chrome은 모든 기능을 지원하고 완벽하게 실행됩니다. - Opera는 JavaScript로 파일을 구문 분석 할 수 있지만 파일 드래그 앤 드롭 및 xmlhttprequest2 업로드를 구현하지는 않습니다. -IE 및 Safari의 데스크탑 버전은 API를 지원하지 않습니다. - Apple은 iPhone 및 iPad 버전의 Safari에서 HTML 파일 업로드 양식을 비활성화했습니다. 왜 그런지 아는 사람이 있습니까?

마지막으로, 내 코드는 기본 개념을 보여줍니다. 오류 검사는 거의 없으며 생산 시스템을 조정해야합니다.

html 및 css

이것은 파일 입력 유형이있는 표준 양식입니다. 유일한 HTML5 기능은 "다중"속성으로, 사용자가 여러 파일을 선택할 수 있습니다. PHP를 실행하는 서버에 파일을 업로드하지만 사용하는 기술에 관계없이 코드는 거의 동일합니다. HIDDEN MAX_FILE_SIZE 값은 300,000 바이트를 지정합니다 -PHP는이 값을 사용하지만 클라이언트에서 큰 파일 업로드를 방지하기 위해 확인합니다.

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

로그인 후 복사

filedrag 요소는 파일 드래그 앤 드롭 위치로 사용됩니다. 이 요소는 CSS에 숨겨져 있지만 드래그 앤 드롭이 지원되면 javaScript에서 활성화됩니다 :

.

우리는 또한 사용자가 파일을 요소로 끌 때 스타일을 변경하는 .hover 클래스를 정의합니다. 브라우저는 적용되지 않습니다 :이 경우 호버 스타일이지만 이벤트가 발생하면 JavaScript를 사용하여 클래스를 추가 할 수 있습니다.

#filedrag {
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 1em 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

#filedrag.hover {
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}

로그인 후 복사

<<> 파일 api

<🎜 🎜> W3C 파일 API는 일부 객체를 제공합니다. 우리는 다음을 사용합니다 :- filleList : 선택한 파일을 나타내는 배열. - 파일 : 단일 파일을 나타냅니다. - Filereader : 클라이언트의 파일 데이터를 읽고 JavaScript에서 사용할 수있는 인터페이스.

<🎜 🎜> <<> 첨부 된 JavaScript 이벤트 <🎜 🎜> 이제 JavaScript를 사용해야 할 때입니다. 우리는 JavaScript 라이브러리를 사용하지 않으므로 타이핑 손가락을 저장하기 위해 ID 및 출력 상태 메시지로 요소를 반환하기위한 여러 도우미 기능을 작성합니다. 이제 파일 API를 사용할 수 있는지 확인하고 init () 함수를 호출합니다.

init () 함수 : 1. 파일 입력 요소의 "변경"이벤트 리스너를 설정합니다. 2. Show #FiLedRag 요소. 3. "Dragover"및 "Dragleave"이벤트 리스너를 설정하여 #FiLEDRAG 요소의 스타일을 변경하십시오. 4. #FiLedRag 요소의 "Drop"이벤트 리스너를 설정하십시오. 5. 양식 제출 버튼 숨기기 - 선택한 파일을 분석하고 업로드하므로 필요하지 않습니다.

파일 드래그 앤 드롭을 지원할 때 파일 입력 요소를 숨기도록 선택할 수 있습니다. 개인적으로 Drag and Drop은 몇 가지 유용성 문제를 가져 오기 때문에 두 옵션을 모두 제공하는 것을 선호합니다. xmlhttprequest.upload 메소드 점검은 오페라의 문제를 방지 할 수 있습니다. 브라우저는 파일, FilElist 및 Filereader를 지원하지만 드래그 앤 드롭 이벤트 또는 XMLHTTPREQUEST2를 지원하지 않습니다. 따라서 파일 정보를 표시 할 수 있지만 #FiLedRag 요소를 표시하거나 제출 버튼을 제거하고 싶지 않습니다.

<<> 파일 드래그 앤 드롭 스타일 변경 <🎜 🎜> 일부 사람들은 웹 브라우저에서 파일 드래그 앤 드롭을 경험했습니다. 실제로 숙련 된 웹 사용자는 이것이 불가능하다고 생각할 수 있습니다. 그래서 우리는 "여기에서 파일을 드래그 앤 드롭"을 선언하는 요소를 사용했습니다. 또한 스타일을 변경하여 파일을 #FiLedRag 위치로 드래그 앤 삭제시기를 표시하려고합니다.

<<> 드래그 앤 드롭 또는 선택된 파일을 분석하십시오 <🎜

"브라우즈"를 사용하여 하나 이상의 파일을 선택하든 #FileDrag 위치로 파일을 드래그 앤 드롭하든 동일한 FileSelecThandler () 함수를 사용합니다.

// 通过ID获取元素
function $id(id) {
    return document.getElementById(id);
}

// 输出信息
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

로그인 후 복사

이 기능 : 1. 호버 스타일을 제거하고 브라우저 이벤트를 취소하려면 filedRagHover ()를 호출하십시오. 이것은 중요합니다. 그렇지 않으면 브라우저가 파일을 표시하려고 시도 할 수 있습니다. 2. filelist 객체를 얻으십시오. 파일 입력 상자 (e.target.files) 또는 #FiLedRag 요소 (e.datatransfer.files)에서 나옵니다. 3. 마지막으로, 함수는 filleList의 모든 파일 객체를 통해 루프하고 파라스 파일 () 함수로 매개 변수로 전달합니다 ... <🎜 🎜>

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

로그인 후 복사

이 기능은 파일 개체가 제공하는 세 가지 기본 읽기 전용 속성을 출력 정보로 사용합니다. -.name : 파일 이름 (경로 정보 제외) -.type : image/jpeg, 텍스트/일반 등과 같은 Mime 유형 --.size : 파일 크기 (바이트).

Firefox, Chrome 또는 Opera에서 데모 페이지를보십시오 (드래그 앤 드롭 지원 없음). 코드를 확인하기 위해 파일을 다운로드 할 수도 있습니다. 우리는 많은 것을 다루었습니다. 다음 포스트에서는

> html5 및 javaScript를 사용하여 드래그 앤 드롭 파일을 열어

… 이 기사를 읽으면 학습 가능한 것을 좋아할 것입니다. 회원은 실제 HTML5 및 CSS3과 같은 모든 itepoint의 전자 책 및 대화식 온라인 과정에 즉시 액세스 할 수 있습니다. 이 기사에서

의견이 닫혔습니다. HTML5에 대해 궁금한 점이 있습니까? 포럼에서 질문하는 이유는 무엇입니까? html5 파일에 대한 FAQS 파일 드래그 앤 드롭 * (기사의 길이로 인해 다음 FAQ 부분이 생략되었습니다. 필요한 경우 FAQ 부품의 번역을 별도로 요청할 수 있습니다.)

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