HTML5 파일 업로드 예

원래 주소:

http://www.webcodegeeks.com/html5/html5-file-upload-example/

이 문서에서는 HTML5 사용 방법을 보여줍니다. 사용자가 선택한 파일 정보를 읽고 파일을 서버에 업로드합니다.

FileApi는 HTML5에 추가된 가장 흥미로운 새로운 기능 중 하나입니다. 파일을 업로드하기 전에 읽을 수 있습니다. 서버로 표시된 파일의 정보를 가져오고, 게시 양식을 사용하지 않고도 파일을 보낼 수 있습니다.

다음은 사용자가 선택한 파일 정보를 읽는 방법을 보여줍니다. Ajax를 사용하여 이러한 파일을 비동기적으로 업로드합니다.

1. 1.1: 파일이 하나뿐인 상황

HTML 코드는 다음과 같습니다

사용자가 파일을 선택하면 입력 요소가 "change" 이벤트를 생성하므로 이 이벤트를 들을 수 있습니다.

<input type="file" id="fileinput" />

보시다시피, FileApi는 사용이 매우 간단하며 "files" 속성을 추가합니다.

document.getElementById('fileinput').addEventListener('change', function(){
    var file = this.files[0];
    // This code is only for demo ...
    console.log("name : " + file.name);
    console.log("size : " + file.size);
    console.log("type : " + file.type);
    console.log("date : " + file.lastModified);
}, false);

요약: "files" 속성은 쓸 수 없으며 내용을 읽을 수만 있습니다. .files[0] 사용자가 선택한 첫 번째 파일을 가져올 수 있습니다.

1.2: 여러 파일

이제 사용자가 선택한 모든 파일 정보를 표시해 보겠습니다.

HTML 코드는 다음과 같습니다

사용자가 업로드할 여러 파일을 선택할 수 있도록 입력 요소 "다중" 속성만 추가하면 됩니다.

<input type="file" id="fileinput" multiple="multiple" />

요약: 추가할 수도 있습니다. 사용자가 업로드할 수 있는 파일 형식을 필터링하려면 "accept" 태그를 사용하세요. 예를 들어 사용자가 이미지만 업로드하도록 하려면 MIME 형식 "image/*"만 필터링하면 됩니다.

document.getElementById('fileinput').addEventListener('change', function(){
    for(var i = 0; i<this.files.length; i++){
        var file =  this.files[i];
        // This code is only for demo ...
        console.group("File "+i);
        console.log("name : " + file.name);
        console.log("size : " + file.size);
        console.log("type : " + file.type);
        console.log("date : " + file.lastModified);
        console.groupEnd();
    }
}, false);

<input type="file" id="fileinput" multiple="multiple" accept="image/*" />

1.3 파일 미리보기

파일 정보와 파일 내용을 모두 읽을 수 있습니다. 예를 들어 업로드하기 전에 파일을 미리 볼 수 있습니다.

미리보기 이미지를 예로 들어보겠습니다.

HTML 코드는 다음과 같습니다.

JavaScript를 사용하여 파일 업로드를 관리합니다.

    
    
    


Upload images ...

<input type="file" id="fileinput" multiple="multiple" accept="image/*" />

gallery.js

previewImage 기능은 다음에서 선택한 파일을 표시합니다. user.

var uploadfiles = document.querySelector('#fileinput');
uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length; i++){
        previewImage(this.files[i]);
    }
}, false);

gallery.js

파일 내용을 비동기적으로 읽기 위해 FileReader 개체를 도입했습니다. 새 FileReader를 사용하여 개체를 인스턴스화합니다. 그런 다음 readAsUrl 메서드를 호출하여 파일 데이터를 읽습니다.

function previewImage(file) {
    var galleryId = "gallery";

    var gallery = document.getElementById(galleryId);
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
        throw "File Type must be an image";
    }

    var thumb = document.createElement("div");
    thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div

    var img = document.createElement("img");
    img.file = file;
    thumb.appendChild(img);
    gallery.appendChild(thumb);

    // 使用FileReader来显示图片内容
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
}

onload 메소드는 파일 내용을 읽은 후 이벤트처럼 호출되며, 파일 내용은 이미지 요소의 src 속성에 할당됩니다: aImg.src = e.target.result;

2. 파일 업로드

파일 업로드에는 XMLHttpRequest(Ajax)를 사용합니다. .

사용자가 선택한 각 파일은 HTTP 요청을 생성하여 서버로 보냅니다.

먼저 XMLHttpRequest를 포함하는 메서드를 정의합니다.

function uploadFile(file){
    var url = 'server/index.php';
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // Every thing ok, file uploaded
            console.log(xhr.responseText); // handle response.
        }
    };
    fd.append("upload_file", file);
    xhr.send(fd);
}

이 메서드는 지정된 URL에 대한 ajax 요청(post 메서드를 통해)을 생성하고 "upload_file"에 파일 콘텐츠를 보냅니다. $_FILES['upload_file']을 통해 이 매개변수를 가져올 수 있습니다.

이제 uploadFile 메소드를 사용하여 선택한 파일을 업로드하겠습니다.

Js는 다음과 같습니다.

<input type="file" id="uploadfiles" multiple="multiple" />

PHP 스크립트는 다음과 같습니다.

var uploadfiles = document.querySelector('#uploadfiles');
uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length; i++){
        uploadFile(this.files[i]); //上传文件
    }
}, false);

3 .

if (isset($_FILES['upload_file'])) {
    if(move_uploaded_file($_FILES['upload_file']['tmp_name'], "datas/" . $_FILES['upload_file']['name'])){
        echo $_FILES['upload_file']['name']. " OK";
    } else {
        echo $_FILES['upload_file']['name']. " KO";
    }
    exit;
} else {
    echo "No files uploaded ...";
}

모든 소스코드

다운로드 위 내용은 관련 내용을 포함하여 HTML5 파일 업로드 예시를 소개하고 있으니 PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되었으면 좋겠습니다.