HTML5 및 AJAX를 사용하여 파일을 비동기로 업로드하는 방법

코어 포인트

파일 업로드 파일 업로드 html5 및 ajax를 사용하여 비동기로 업로드 할 수 있으므로 사용자는 업로드하는 동안 페이지에서 다른 작업을 수행 할 수 있습니다. 이 프로세스에는 HTML 양식을 작성하여 파일을 PHP 페이지에 업로드하는 것이 포함되며 JavaScript는 30 만 바이트가 미만인 JPG 이미지 만 업로드되도록합니다.

JavaScript 업로드 함수에는 XMLHTTPREQUEST2 객체 (Firefox 및 Chrome에서 사용 가능)가 필요합니다. xmlhttprequest의 .open () 메소드는 데이터를 php 페이지에 게시하고 http 헤더를 파일 이름으로 설정하고 파일 개체를 .send () 메소드로 전달합니다.

PHP 파일은 x_filename http 헤더를 확인하여 AJAX 요청과 표준 양식 게시물을 구별합니다. 파일 이름이 설정되면 PHP는 게시 된 데이터를 검색하여 "업로드"폴더의 새 파일로 출력합니다. 표준 HTML Multipart/Form-Data Post는 일반적인 PHP $ _file 함수를 사용하여 처리됩니다.
이전 기사에서는 html5를 사용하여 파일을 끌어다 놓고 파일을 드롭하는 방법과 html5 및 javaScript를 사용하여 파일을 열는 방법을 배웠습니다. 이제 각 파일을 서버에 업로드 할 수있는 유효한 파일 세트가 있습니다. 이 프로세스는 백그라운드에서 비동기 적으로 이루어 지므로 사용자는 프로세스가 진행됨에 따라 페이지의 다른 작업을 완료 할 수 있습니다.
html
html 양식을 다시 확인해 봅시다 :

파일을 PHP 페이지 upload.php에 업로드합니다. 사용자가 "파일 업로드"를 클릭하면 페이지가 Ajax 업로드 요청 및 표준 양식 게시물을 처리합니다. JavaScript는 JPG 이미지 만 300,000 바이트 (max_file_size에 지정된 값)로 업로드되도록합니다.

JavaScript

먼저, 하나 이상의 파일을 선택하거나 드래그하고 드롭 할 때 호출 된 fileselecthandler () 함수에 줄을 추가해야합니다. 파일 루프에서는 다른 함수를 호출합니다 - uploadfile () :

파일 업로드에는 xmlhttprequest2 객체가 필요하며 현재 Firefox 및 Chrome에서 사용할 수 있습니다. ajax 호출을하기 전에 .upload () 메소드를 사용할 수 있고 max_file_size 양식 값보다 작은 파일 크기의 jpg가 있습니다. .open () xmlhttprequest의 메소드는 데이터를 업로드에 게시하도록 설정되어 있습니다 (업로드 양식의 조치 속성). 또한 HTTP 헤더를 파일 이름으로 설정하고 파일 개체를 .send () 메소드로 전달합니다.

php

당사의 PHP 파일 업로드.

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div>
</div>
<div>上传文件</div>
</fieldset></code>

파일 이름이 설정되면 PHP는 게시 된 데이터를 검색하여 "업로드"폴더의 새 파일로 출력 할 수 있습니다. 놀랍게도, 이것은 단일 줄의 코드로 달성 할 수 있습니다 :

.

표준 HTML Multipart/Form-Data 게시물은 일반적인 php $ _file 함수를 사용하여 처리 할 수 ​​있습니다 :

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div>
</div>
<div>上传文件</div>
</fieldset></code>

데모 페이지를 볼 수 있지만 PHP 지원이없는 서버에서 호스팅되며 업로드가 발생하지 않습니다. 따라서 파일을 다운로드하여 코드를 확인하고 자체 PHP 서버에 설치하십시오.

위의 코드는 작동하지만 사용자는 파일 업로드가 시작, 완료 또는 실패했는지 알지 못합니다. 이 시리즈의 마지막 이슈를 읽어야합니다. 파일 업로드 진행 상황 에서 파일 업로드 진행률 표시 줄을 만드는 방법. html5 ajax 파일 업로드

에 대한 FAQ (FAQ) (FAQ 부품은 여기에서 생략됩니다.이 부분은 의사 원리 목표와 관련이없고 더 길기 때문에 생략됩니다. FAQ를 유지해도 괜찮지 만 언어는 전체 스타일과 일치하도록 언어를 재구성해야합니다. 기사.)

위 내용은 HTML5 및 AJAX를 사용하여 파일을 비동기로 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!