Comment utiliser l'interface de fichier HTML5 pour télécharger des fichiers sur une page Web

Cet article présente principalement comment utiliser l'interface de fichier HTML5 pour télécharger des fichiers sur une page Web. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. L'interface fournit Obtenez des informations relatives au fichier et exécutez JavaScript sur la page Web pour accéder au contenu du fichier. Ensuite, cet article vous présentera l'interface de fichier HTML5 pour utiliser la fonction de téléchargement de fichiers sur la page Web. Les amis qui en ont besoin peuvent se référer à l'interface

Fichier qui fournit des informations relatives aux fichiers et exécute JavaScript pour y accéder. fichiers sur le contenu de la page Web.

L'objet File provient de l'objet FileList renvoyé par l'utilisateur à l'aide de la balise input pour sélectionner le fichier, et provient de l'objet DataTransfer de l'opération glisser-déposer. Un objet File est un type spécial de Blob qui peut être utilisé dans n’importe quel contexte où un Blob peut être utilisé.

Pour utiliser des fichiers dans des pages Web, les objets généralement impliqués sont : l'objet File, l'objet FileList et l'objet FileReader.

Objet FileListFileList provient de deux endroits, à savoir l'attribut files de l'élément d'entrée et l'API glisser-déposer (lors du déplacement d'un file event.DataTransfer.files est un objet FileList)

<input id="fileItem" type="file">
var fileList = document.getElementById(&#39;fileItem&#39;).files

Propriétés standard de l'objet FileList length : Il s'agit d'une propriété en lecture seule. Cette propriété renvoie la longueur de l'objet File contenu dans l'objet FileList.

Méthodes standard de l'objet FileList item(index) : récupère l'objet File à la position spécifiée dans l'objet FileList. Il peut être abrégé sous forme d'index de tableau

Objet File Chaque élément de l'objet FileList est un objet File. L’objet fichier est un type spécial de Blob.

Attributs standards de l'objet File1.lastModified : renvoie l'heure à laquelle le fichier a été modifié, qui est l'heure depuis le 1er janvier. 1970 Nombre de millisecondes écoulées depuis 0:00:00. Est un attribut en lecture seule

2.name : renvoie le nom du fichier référencé par l'objet fichier. Il s'agit d'un attribut en lecture seule

3.type : renvoie le type de fichier. du fichier référencé par l'objet fichier, est de type MINE, il s'agit d'un attribut en lecture seule.

4.size : renvoie la taille du fichier référencé par l'objet fichier. Il s'agit d'un attribut en lecture seule.

Méthodes standard de l'objet File Aucune méthode distincte n'est définie pour l'objet File, mais il a des méthodes héritées de l'objet Blob.

Objet FileReader L'objet FileReader permet aux applications Web de lire de manière asynchrone des fichiers sur l'ordinateur de l'utilisateur.

FileReader() est un constructeur grâce auquel un nouvel objet FileReader peut être créé.

var fileReader = new FileReader();

Propriétés standard de l'objet FileReader1.error : retour du fichier lu Une erreur s'est produite lors du processus de récupération.

2.result : renvoie le contenu du fichier et le type de valeur de retour est String ou ArrayBuffer. Cet attribut n'est valide qu'une fois l'opération de lecture terminée.

3.readyState : renvoie l'état actuel de l'opération de lecture. Les valeurs possibles sont 0 : la lecture n'a pas commencé, 1 : la lecture, 2 : la lecture terminée.

Méthodes standard de l'objet FileReader1.abort() : Abandonnez l'opération de lecture. La valeur de readyState devient 2.

2.readAsArrayBuffer(Blob) : lit le Blob spécifié, tel qu'un objet File (l'objet File est un Blob spécial). Dès que la lecture est terminée, la valeur de l'attribut readyState deviendra 2 et l'attribut result est un ArrayBuffer représentant les données du fichier.

3.readAsDataURL(Blob) : lit le Blob spécifié, tel qu'un objet File (l'objet File est un Blob spécial). Dès que la lecture est terminée, la valeur de l'attribut readyState deviendra 2. L'attribut de résultat est une URL représentant les données du fichier, et le format des données est une chaîne codée en base64

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

4.readAsText(Boob,encoding) : lit le Blob spécifié, tel qu'un objet File (l'objet File est un objet spécial Goutte). Dès que la lecture est terminée, la valeur de l'attribut readyState passera à 2 et l'attribut result est une chaîne de texte représentant les données du fichier. Le deuxième paramètre est facultatif et est utilisé pour spécifier le codage de la chaîne de texte dans l'attribut de résultat. La valeur par défaut est UTF-8.

Événements de l'objet FileReader 1.abort : déclenché lorsque l'opération de lecture est terminée.

2.error : Déclenché lorsqu'une erreur est rencontrée lors de l'opération de lecture.

3.load : Déclenché lorsque l'opération de lecture est terminée avec succès.

4.loadend : déclenché à la fin de l'opération de lecture. Il ne peut pas s'agir d'un succès ou d'un échec de lecture.

5.loadStart : Déclenché lorsque l'opération de lecture démarre.

6.processus : Déclenché pendant la lecture.

Utilisation de fichiers dans des applications Web En utilisant l'objet fichier en HTML5, vous pouvez accéder aux fichiers locaux sélectionnés et lire le contenu de ces fichiers. Les objets fichier proviennent soit de l'élément d'entrée, soit de l'interface glisser-déposer.

通过input元素选择文件

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

访问通过input选择的文件

var selectedFile = document.getElementById('input').files[0];

上述代码段一次只能选择一个文件，如果一次要选择多个文件，就需要给input元素添加一个multiple属性，并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。

通过drag and drop接口选择文件

关于drag and drop接口可以查看HTML5 DragEvent。

第一步：创建一个放置区域。一个普通的元素，如p，p等。

第二步：给放置区添加drop，dragenter，dragover事件处理程序。其中起关键作用的是drop事件处理程序。

下面是一个显示缩略图的例子：

<p id=&#39;dropbox&#39; class=&#39;dropbox&#39;></p>
.dropbox{
 border:solid 3px red;
 height:400px;
 width:auto;      
}

var dropbox;
dropbox = document.getElementById("dropbox");
//注册事件处理程序
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}
function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  handleFiles(files);
}
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
      continue;
    }
    var img = document.createElement("img");
    img.file = file;
    dropBox.appendChild(img); 
    var reader = new FileReader();
    reader.onload =  function() {
        img.src = reader.result; 
        };
    reader.readAsDataURL(file);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5中postMessage API的基本使用

如何用HTML5操作WebSQL数据库

HTML5和jQuery实现搜索智能匹配的功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!