suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie Ajax, um die Funktion zum Hochladen großer Dateien zu implementieren

So verwenden Sie Ajax, um die Funktion zum Hochladen großer Dateien zu implementieren

php中世界最好的语言
php中世界最好的语言Original
2018-03-30 17:04:302712Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit Ajax die Funktion zum Hochladen großer Dateien implementieren und welche Vorsichtsmaßnahmen für das Hochladen großer Dateien mit Ajax gelten Praktischer Koffer. Stehen Sie auf und werfen Sie einen Blick darauf.

Jeder weiß, dass PHP Einschränkungen beim Hochladen von Dateien hat. Wenn die php.ini-Datei nicht geändert wurde, beträgt die Standard-Upload-Größenbeschränkung 2 MB. So laden Sie beispielsweise eine große Datei hoch mehr als 1 GB, was durch Ausschneiden und Hochladen großer Dateien gelöst werden kann.

Was ist das Ausschneiden und Hochladen großer Dateien?

Prinzip: Verwenden Sie die neuen Funktionen von HTML5, um den Dateiinhalt in Segmente mit Binärinformationen zu schneiden und dann jedes Mal ein Segment auf den Server hochzuladen. Der Server muss nur die Binärinformationen integrieren und speichern Wir laden jedes Mal in eine Datei hoch, dann ist die endgültige Datei die hochgeladene Datei.

Da die Standard-Upload-Größe von php.ini 2 MB beträgt, dauert es lange, wenn ich jeden Stapel auf 2 MB hochlade. Hier beschränke ich die Größe auf 20 MB und die maximalen Postdaten 28M, was zum Testen praktisch ist. Wenn seine Parameter während der tatsächlichen Entwicklung nicht geändert werden können, dürfen die in jedem Stapel hochgeladenen Daten die Höchstgrenze nicht überschreiten. 

post_max_size = 28M 
upload_max_filesize = 20M

Ich habe es in Nginx hochgeladen, daher muss ich auch die NginxKonfigurationsdatei/etc/nginx/nginx.con

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

JavaScript Das File-Objekt in

Wir haben diese API im vorherigen Artikel verwendet. Das File-Objekt speichert die Größe, den Namen, den Typ und andere Informationen der Datei

JavaScript Das Blob-Objekt

Das Blob-Objekt ist ein Binärobjekt und auch die übergeordnete Klasse des File-Objekts. Es gibt eine sehr wichtige Methode im Blob-Objekt: die Methode „slice()“. Mit dieser Methode können wir den Dateiinhalt in Binärinformationen zerlegen. Die Methode „slice()“ akzeptiert drei Parameter: einen Start-Offset, einen End-Offset und einen optionalen MIME-Typ. Wenn der MIME-Typ nicht festgelegt ist, hat das neue Blob-Objekt denselben MIME-Typ wie das übergeordnete Objekt.

Seite index.php hochladen: 

<!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>
Datenseite hochladen.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); 
} 
?>
Erstellen Sie vor dem Testen den Upload-Ordner

Wenn es sich um ein Linux-System handelt, denken Sie daran, Berechtigungen für Uploads zu erteilen.

sudo chmod -R 777 uoloads/  //赋予uploads文件夹 777 权限  -R 递归子文件
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Ajax, um asynchron zu prüfen, ob der Benutzername dupliziert ist

Ajax sollte das erhalten JSON-Daten als undefiniert. Verwendung von

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax, um die Funktion zum Hochladen großer Dateien zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript nginx json html5 ajax 父类 undefined 对象 异步 linux
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie implementiert Fileupload von Ajax mehrere Datei-Uploads?Nächster Artikel：Wie implementiert Fileupload von Ajax mehrere Datei-Uploads?

In Verbindung stehende Artikel

Mehr sehen