ajaxを利用して大容量ファイルアップロード機能を実装する方法-jsチュートリアル-php.cn

ajaxを利用して大容量ファイルアップロード機能を実装する方法

php中世界最好的语言

リリース： 2018-03-30 17:04:30

オリジナル

2631 人が閲覧しました

今回は、ajaxを使用して大きなファイルをアップロードする機能を実装する方法と、ajaxを使用して大きなファイルをアップロードする際の注意点について説明します。以下は実際的なケースです。

PHP にはファイルのアップロードに関する制限があることは誰もが知っています。php.ini ファイルが変更されていない場合、デフォルトのアップロードサイズ制限は 2M です。たとえば、1G を超える大きなファイルをアップロードするにはどうすればよいでしょうか。、大規模なファイルを切り取ってアップロードすることで解決できます。

大きなファイルのカットとアップロードとは何ですか?

原則: HTML5 の新機能を使用して、ファイルのコンテンツをバイナリ情報のセグメントに分割し、毎回 1 つのセグメントをサーバーにアップロードします。サーバーは、毎回アップロードするバイナリ情報を統合して保存するだけで済みます。ファイルの場合、最後のファイルがアップロードされたファイルです。

php.iniのデフォルトのアップロードサイズは2Mなので、各バッチを2Mにアップロードすると、テスト中に時間がかかります。ここではサイズを20Mに制限し、最大投稿データは28Mです。テストに便利です。実際の開発中にパラメータを変更できない場合、各バッチでアップロードされるデータは最大制限を超えることはできません。

post_max_size = 28M 
upload_max_filesize = 20M

ログイン後にコピー

私はnginxでアップロードしたので、Nginx

設定ファイルを変更する必要があります/etc/nginx/nginx.con

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

ログイン後にコピー

JavaScriptのファイルオブジェクト

このAPIは以前の記事ですでに使用しています。 File オブジェクトはファイルのサイズ、名前、タイプ、その他の情報を保存します

JavaScript の Blob オブジェクト

Blob オブジェクトはバイナリオブジェクトであり、File オブジェクトの親クラスでもあります非常に重要なメソッドがあります。 Blob オブジェクト:slice() メソッドで、このメソッドを使用してファイルの内容をバイナリ情報に切り取ることができます。 lice() メソッドは、開始オフセット、終了オフセット、およびオプションの MIME タイプの 3 つのパラメータを受け入れます。 MIME タイプが設定されていない場合、新しい Blob オブジェクトは親と同じ MIME タイプを持ちます。

アップロードページ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>

ログイン後にコピー

データ受信ページ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); 
} 
?>

ログイン後にコピー

テストする前に、最初にアップロードフォルダを作成してください

Linuxシステムの場合は、アップロードへのアクセス許可を与えることを忘れないでください

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

ログイン後にコピー

この記事の事例を読んだあなたはその方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Ajaxを使用してユーザー名が重複しているかどうかを非同期で確認する方法

Ajaxを使用してjsonデータを未定義として取得する方法

以上がajaxを利用して大容量ファイルアップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

ajaxを利用して大容量ファイルアップロード機能を実装する方法