Table des matières
Upload images ...
Maison développement back-end tutoriel php HTML5 文件上传示例

HTML5 文件上传示例

Aug 08, 2016 am 09:19 AM
console file files quot

原文地址:

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

本文将为大家展示如何使用HTML5来读取用户选择的文件信息并将文件上传到一个服务器上.

FileApi是HTML5新添加的功能中最有趣的一个. 我们可以在文件上传到服务器前读取显示文件的信息, 并且可以不使用post表单的方式来发送文件.

下文将展示如何读取用户选择的文件信息, 并使用Ajax异步上传这些文件.


1.显示文件信息

1.1: 只有一个文件的情况

HTML代码如下

<input type="file" id="fileinput">
Copier après la connexion

当用户选择一个文件时, inpupt元素会产生“change”事件, 所以我们可以监听这个事件:

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);
Copier après la connexion

如您所见, FileApi使用起来非常简单, 它在input元素中添加了”files”属性.

小结: “files”属性不可写, 只能读取其中的内容. 您可能注意到了, 使用this.files[0]就可以获得用户已选择的第一个文件.


1.2: 多个文件

现在我们要显示用户选择的全部文件信息.

HTML代码如下

<input type="file" id="fileinput" multiple>
Copier après la connexion

我们只需要在input元素中添加”multiple”属性, 这样就可以允许用户选择多个文件上传.

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>小结: 您还可以添加”accept”标签来过滤用户可以上传的文件类型. 例如, 当您只希望用户上传图片时, 只需要过滤出MIME类型”image/*”即可:</span></p>
<pre name="code"><input type="file" id="fileinput" multiple accept="image/*">
Copier après la connexion

1.3 预览文件

我们既可以读取文件信息, 也能读取文件的内容. 例如, 我们可以在上传之前预览文件.

以预览图片举例:

HTML代码如下:



    <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>

Copier après la connexion

使用JavaScript来管理文件上传.

gallery.js

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>previewImage函数将会显示用户选择的文件.</span></p>
<p><span>gallery.js</span></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);
}
Copier après la connexion

我们引入了FileReader对象来异步读取文件内容. 通过使用new FileReader来实例对象, 然后调用readAsUrl方法读取文件的数据.

onload方法在文件内容读取结束后像事件一样被调用, 然后文件内容会被赋值到image元素的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);
}
Copier après la connexion

这个方法将会生成一个ajax请求(通过post方式)到指定的url, 并发送”upload_file”请求参数中的文件内容. 我们可以通过$_FILES[‘upload_file’]来获得这个参数.

现在, 我们将使用uploadFile方法来上传选中的文件.

<input type="file" id="uploadfiles" multiple>
Copier après la connexion

Js如下:

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>PHP脚本如下:</span></p>
<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 ...";
}
Copier après la connexion

3. 下载

全部源代码

以上就介绍了HTML5 文件上传示例,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Poésie aléatoire d'application native Hongmeng Poésie aléatoire d'application native Hongmeng Feb 19, 2024 pm 01:36 PM

Pour en savoir plus sur l'open source, veuillez visiter : 51CTO Hongmeng Developer Community https://ost.51cto.com Environnement d'exploitation DAYU200 : 4.0.10.16SDK : 4.0.10.15IDE : 4.0.600 1. Pour créer une application, cliquez sur Fichier- >nouveauFichier->CréerProgect. Sélectionnez le modèle : [OpenHarmony] EmptyAbility : indiquez le nom du projet, shici, le nom du package d'application com.nut.shici et l'emplacement de stockage de l'application XXX (pas de chinois, de caractères spéciaux ou d'espaces). CompileSDK10, modèle : étape. Appareil

Précommandes ouvertes pour la nouvelle actualisation de la Nintendo Switch Lite Précommandes ouvertes pour la nouvelle actualisation de la Nintendo Switch Lite Jun 29, 2024 am 06:49 AM

Nintendo a ouvert les précommandes pour la dernière version du Switch Lite (curr. 189,99 $ sur Amazon). Cependant, l’appareil n’est pas encore disponible à la commande dans le monde entier. Pour récapituler, la société a présenté la Switch Lite Hyrule Edition il y a près de deux semaines.

Que signifie consoler ? Que signifie consoler ? Sep 05, 2023 pm 02:43 PM

Console signifie console. Il s'agit d'un appareil ou d'un logiciel qui interagit avec un système informatique. Il s'agit généralement d'un appareil doté d'un clavier et d'un écran pour saisir et afficher des informations. La console était à l'origine utilisée pour les grands systèmes informatiques, puis également appliquée aux systèmes personnels. ordinateurs et serveurs, il peut aider les utilisateurs à gérer et à entretenir les systèmes informatiques, ainsi qu'à installer des systèmes d'exploitation et des applications, à déboguer des programmes, etc.

Utilisez la fonction File.length() de Java pour obtenir la taille du fichier Utilisez la fonction File.length() de Java pour obtenir la taille du fichier Jul 24, 2023 am 08:36 AM

Utilisez la fonction File.length() de Java pour obtenir la taille d'un fichier. La taille du fichier est une exigence très courante lors des opérations sur les fichiers. Java fournit un moyen très pratique d'obtenir la taille d'un fichier, c'est-à-dire en utilisant la longueur (. ) méthode de la classe File . Cet article explique comment utiliser cette méthode pour obtenir la taille d'un fichier et donne des exemples de code correspondants. Tout d’abord, nous devons créer un objet File pour représenter le fichier dont nous voulons obtenir la taille. Voici comment créer un objet File : Filef

Effacer la sortie de la console à l'aide de la fonction Console.Clear en C# Effacer la sortie de la console à l'aide de la fonction Console.Clear en C# Nov 18, 2023 am 11:00 AM

Utilisez la fonction Console.Clear en C# pour effacer la sortie de la console Dans les applications de console C#, nous devons souvent effacer les informations de sortie dans la console pour afficher du nouveau contenu ou offrir une meilleure expérience utilisateur. C# fournit la fonction Console.Clear pour implémenter cette fonction, qui peut effacer la sortie dans la console et rendre l'interface à nouveau vide. Le format d'appel de la fonction Console.Clear est le suivant : Console.Clear(); Cette fonction ne nécessite aucune entrée.

Comment convertir un blob php en fichier Comment convertir un blob php en fichier Mar 16, 2023 am 10:47 AM

Comment convertir un blob php en fichier : 1. Créez un exemple de fichier php ; 2. Via "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' }) } » peut être utilisée pour convertir un Blob en fichier.

Renommez les fichiers à l'aide de la fonction File.renameTo() de Java Renommez les fichiers à l'aide de la fonction File.renameTo() de Java Jul 25, 2023 pm 03:45 PM

Utilisez la fonction File.renameTo() de Java pour renommer des fichiers. En programmation Java, nous avons souvent besoin de renommer des fichiers. Java fournit la classe File pour gérer les opérations sur les fichiers, et sa fonction renameTo() peut facilement renommer les fichiers. Cet article explique comment utiliser la fonction File.renameTo() de Java pour renommer des fichiers et fournit des exemples de code correspondants. La fonction File.renameTo() est une méthode de la classe File.

Utilisez la fonction File.getParentFile() de Java pour obtenir le répertoire parent du fichier Utilisez la fonction File.getParentFile() de Java pour obtenir le répertoire parent du fichier Jul 27, 2023 am 11:45 AM

Utilisez la fonction File.getParentFile() de Java pour obtenir le répertoire parent d'un fichier. En programmation Java, nous avons souvent besoin d'exploiter des fichiers et des dossiers. Lorsque nous avons besoin d'obtenir le répertoire parent d'un fichier, nous pouvons utiliser la fonction File.getParentFile() fournie par Java. Cet article explique comment utiliser cette fonction et fournit des exemples de code. La classe de fichiers en Java est la classe principale utilisée pour gérer les fichiers et les dossiers. Il fournit de nombreuses méthodes pour obtenir et manipuler les propriétés des fichiers

See all articles