Maison > Article > interface Web > Comment utiliser ajax pour implémenter la fonction de téléchargement de fichiers volumineux

Comment utiliser ajax pour implémenter la fonction de téléchargement de fichiers volumineux

php中世界最好的语言original: 2018-03-30 17:04:302644parcourir

Cette fois, je vais vous montrer comment utiliser ajax pour implémenter la fonction de téléchargement de fichiers volumineux, et quelles sont les précautions pour télécharger des fichiers volumineux à l'aide d'ajax. cas pratique. Levez-vous et jetez un œil.

Tout le monde sait que PHP a des restrictions sur le téléchargement de fichiers. Si le fichier php.ini n'a pas été modifié, la limite de taille de téléchargement par défaut est de 2 Mo. Alors, comment télécharger un gros fichier, par exemple un gros fichier de. plus de 1G, ce qui peut être résolu en coupant et en téléchargeant des fichiers volumineux.

Qu'est-ce que couper et télécharger des fichiers volumineux ?

Principe : utilisez les nouvelles fonctionnalités de HTML5 pour découper le contenu du fichier en segments d'informations binaires, puis téléchargez un segment sur le serveur à chaque fois. Le serveur n'a besoin que d'intégrer et de stocker les informations binaires. nous téléchargeons à chaque fois dans un fichier, alors le fichier final est le fichier téléchargé.

Étant donné que la taille de téléchargement par défaut de php.ini est de 2 Mo, si chaque lot est téléchargé à 2 Mo, cela prendra beaucoup de temps lors du test. Ici, je limite la taille à 20 Mo, et les données de publication maximales sont. 28M, ce qui est pratique pour les tests. Si ses paramètres ne peuvent pas être modifiés lors du développement réel, les données téléchargées dans chaque lot ne peuvent pas dépasser la limite maximale.

post_max_size = 28M 
upload_max_filesize = 20M

Je l'ai téléchargé dans nginx, je dois donc également modifier le fichier de configuration Nginx/etc/nginx/nginx.con

//在http{} 里面加即可 
client_max_body_size 50m　　　#客户端最大上传大小 50M

JavaScript L'objet File dans

Nous avons utilisé cette API dans l'article précédent. L'objet File stocke la taille, le nom, le type et d'autres informations du fichier

. JavaScript L'objet Blob

L'objet Blob est un objet binaire et est également la classe parent de l'objet File. Il existe une méthode très importante dans l'objet Blob : la méthode slice() qui utilise cela. méthode, nous pouvons couper le contenu du fichier en informations binaires. La méthode slice() accepte trois paramètres, un décalage de début, un décalage de fin et un type MIME facultatif. Si le type MIME n'est pas défini, le nouvel objet Blob a le même type MIME que le parent.

Page de téléchargement index.php :

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>大文件切割上传</title> 
  <link rel="stylesheet" href=""> 
  <script> 
    function selfile(){ 
      const LENGTH = 1024 * 1024 * 10;//每次上传的大小 
      var file = document.getElementsByName('video')[0].files[0];//文件对象 
      var filename=document.getElementsByName('video')[0].files[0].name; 
      var totalSize = file.size;//文件总大小 
      var start = 0;//每次上传的开始字节 
      var end = start + LENGTH;//每次上传的结尾字节 
      var fd = null//创建表单数据对象 
      var blob = null;//二进制对象 
      var xhr = null;//xhr对象 
      while(start < totalSize){ 
        fd = new FormData();//每一次需要重新创建 
        xhr = new XMLHttpRequest();//需要每次创建并设置参数 
        xhr.open(&#39;POST&#39;,&#39;upload.php&#39;,false); 
        blob = file.slice(start,end);//根据长度截取每次需要上传的数据 
        fd.append(&#39;video&#39;,blob);//添加数据到fd对象中 
        fd.append(&#39;filename&#39;,filename); //获取文件的名称 
        xhr.send(fd);//将fd数据上传 
 
        //重新设置开始和结尾 
        start = end; 
        end = start + LENGTH; 
 
      } 
 
    } 
  </script> 
</head> 
<body> 
<h1>大文件切割上传</h1> 
<input type="file" name="video" onchange="selfile();" /> 
</body> 
</html>

Page de réception des données upload.php :

<?php 
/** 
 * 大文件切割上传，把每次上传的数据合并成一个文件 
 */ 
 
$filename = &#39;./uploads/&#39;.$_POST[&#39;filename&#39;];//确定上传的文件名 
//第一次上传时没有文件，就创建文件，此后上传只需要把数据追加到此文件中 
if(!file_exists($filename)){ 
 move_uploaded_file($_FILES[&#39;video&#39;][&#39;tmp_name&#39;],$filename); 
}else{ 
 file_put_contents($filename,file_get_contents($_FILES[&#39;video&#39;][&#39;tmp_name&#39;]),FILE_APPEND); 
} 
?>

Avant de tester, créez le dossier de téléchargements

S'il s'agit d'un système Linux, n'oubliez pas d'autoriser les téléchargements

sudo chmod -R 777 uoloads/  //赋予uploads文件夹 777 权限  -R 递归子文件

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

Comment utiliser Ajax pour vérifier de manière asynchrone si le nom d'utilisateur est dupliqué

ajax devrait obtenir le données json comme non définies Comment utiliser

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!

php JavaScript nginx json html5 ajax 父类 undefined 对象异步 linux

Déclaration：

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

Article précédent：Comment Fileupload d'Ajax implémente-t-il plusieurs téléchargements de fichiers ?Article suivant：Comment Fileupload d'Ajax implémente-t-il plusieurs téléchargements de fichiers ?

Articles Liés

Voir plus