찾다
백엔드 개발PHP 튜토리얼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>

요약: 추가할 수도 있습니다. 사용자가 업로드할 수 있는 파일 형식을 필터링하려면 "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 console.log : file.name file.size file.type file.lastmodified console.groupend false><p><span></span></p>
<pre name="code"><input type="file" id="fileinput" multiple accept="image/*">
1.3 파일 미리보기

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

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

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

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


    <meta charset="UTF-8">
    <title>Preview images</title>
    <style>
        #gallery .thumbnail{
            width:150px;
            height: 150px;
            float:left;
            margin:2px;
        }
        #gallery .thumbnail img{
            width:150px;
            height: 150px;
        }

    </style>


<h2 id="Upload-images">Upload images ...</h2>

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

<div id="gallery"></div>
<script src="gallery.js"></script>

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 false><p><span></span>gallery.js</p>
<p> <span></span>파일 내용을 비동기적으로 읽기 위해 FileReader 개체를 도입했습니다. 새 FileReader를 사용하여 개체를 인스턴스화합니다. 그런 다음 readAsUrl 메서드를 호출하여 파일 데이터를 읽습니다.
</p>
<pre name="code">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>

PHP 스크립트는 다음과 같습니다.
var uploadfiles = document.querySelector('#uploadfiles');
uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length i uploadfile false><p><span></span></p>3 . <pre name="code">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 튜토리얼에 관심이 있는 친구들에게 도움이 되었으면 좋겠습니다.

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
PHP와 Python : 다른 패러다임이 설명되었습니다PHP와 Python : 다른 패러다임이 설명되었습니다Apr 18, 2025 am 12:26 AM

PHP는 주로 절차 적 프로그래밍이지만 객체 지향 프로그래밍 (OOP)도 지원합니다. Python은 OOP, 기능 및 절차 프로그래밍을 포함한 다양한 패러다임을 지원합니다. PHP는 웹 개발에 적합하며 Python은 데이터 분석 및 기계 학습과 같은 다양한 응용 프로그램에 적합합니다.

PHP와 Python : 그들의 역사에 깊은 다이빙PHP와 Python : 그들의 역사에 깊은 다이빙Apr 18, 2025 am 12:25 AM

PHP는 1994 년에 시작되었으며 Rasmuslerdorf에 의해 개발되었습니다. 원래 웹 사이트 방문자를 추적하는 데 사용되었으며 점차 서버 측 스크립팅 언어로 진화했으며 웹 개발에 널리 사용되었습니다. Python은 1980 년대 후반 Guidovan Rossum에 의해 개발되었으며 1991 년에 처음 출시되었습니다. 코드 가독성과 단순성을 강조하며 과학 컴퓨팅, 데이터 분석 및 기타 분야에 적합합니다.

PHP와 Python 중에서 선택 : 가이드PHP와 Python 중에서 선택 : 가이드Apr 18, 2025 am 12:24 AM

PHP는 웹 개발 및 빠른 프로토 타이핑에 적합하며 Python은 데이터 과학 및 기계 학습에 적합합니다. 1.PHP는 간단한 구문과 함께 동적 웹 개발에 사용되며 빠른 개발에 적합합니다. 2. Python은 간결한 구문을 가지고 있으며 여러 분야에 적합하며 강력한 라이브러리 생태계가 있습니다.

PHP 및 프레임 워크 : 언어 현대화PHP 및 프레임 워크 : 언어 현대화Apr 18, 2025 am 12:14 AM

PHP는 현대화 프로세스에서 많은 웹 사이트 및 응용 프로그램을 지원하고 프레임 워크를 통해 개발 요구에 적응하기 때문에 여전히 중요합니다. 1.PHP7은 성능을 향상시키고 새로운 기능을 소개합니다. 2. Laravel, Symfony 및 Codeigniter와 같은 현대 프레임 워크는 개발을 단순화하고 코드 품질을 향상시킵니다. 3. 성능 최적화 및 모범 사례는 응용 프로그램 효율성을 더욱 향상시킵니다.

PHP의 영향 : 웹 개발 및 그 이상PHP의 영향 : 웹 개발 및 그 이상Apr 18, 2025 am 12:10 AM

phphassignificallyimpactedwebdevelopmentandextendsbeyondit

스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?Apr 17, 2025 am 12:25 AM

PHP 유형은 코드 품질과 가독성을 향상시키기위한 프롬프트입니다. 1) 스칼라 유형 팁 : PHP7.0이므로 int, float 등과 같은 기능 매개 변수에 기본 데이터 유형을 지정할 수 있습니다. 2) 반환 유형 프롬프트 : 기능 반환 값 유형의 일관성을 확인하십시오. 3) Union 유형 프롬프트 : PHP8.0이므로 기능 매개 변수 또는 반환 값에 여러 유형을 지정할 수 있습니다. 4) Nullable 유형 프롬프트 : NULL 값을 포함하고 널 값을 반환 할 수있는 기능을 포함 할 수 있습니다.

PHP는 객체 클로닝 (클론 키워드) 및 __clone 마법 방법을 어떻게 처리합니까?PHP는 객체 클로닝 (클론 키워드) 및 __clone 마법 방법을 어떻게 처리합니까?Apr 17, 2025 am 12:24 AM

PHP에서는 클론 키워드를 사용하여 객체 사본을 만들고 \ _ \ _ Clone Magic 메소드를 통해 클로닝 동작을 사용자 정의하십시오. 1. 복제 키워드를 사용하여 얕은 사본을 만들어 객체의 속성을 복제하지만 객체의 속성은 아닙니다. 2. \ _ \ _ 클론 방법은 얕은 복사 문제를 피하기 위해 중첩 된 물체를 깊이 복사 할 수 있습니다. 3. 복제의 순환 참조 및 성능 문제를 피하고 클로닝 작업을 최적화하여 효율성을 향상시키기 위해주의를 기울이십시오.

PHP vs. Python : 사용 사례 및 응용 프로그램PHP vs. Python : 사용 사례 및 응용 프로그램Apr 17, 2025 am 12:23 AM

PHP는 웹 개발 및 컨텐츠 관리 시스템에 적합하며 Python은 데이터 과학, 기계 학습 및 자동화 스크립트에 적합합니다. 1.PHP는 빠르고 확장 가능한 웹 사이트 및 응용 프로그램을 구축하는 데 잘 작동하며 WordPress와 같은 CMS에서 일반적으로 사용됩니다. 2. Python은 Numpy 및 Tensorflow와 같은 풍부한 라이브러리를 통해 데이터 과학 및 기계 학습 분야에서 뛰어난 공연을했습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.