怎麼用ajax如何實現大檔案上傳的功能

這次帶給大家怎麼用ajax如何實現大文件上傳的功能，用ajax實現大文件上傳的注意事項有哪些，下面就是實戰案例，一起來看一下。

大家都知道php上傳檔案有限制，如果沒有修改過php.ini檔案的話，預設的上傳大小限制為2M，那麼該如何上傳大檔案了，比如說上傳一個1G多的大文件，可以使用大檔案切割上傳的方式來解決。

何為大檔案切割上傳？

原則：利用HTML5的新特性，將檔案內容切割成分段的二進位信息，然後每次向伺服器上傳一段，而伺服器，只需要把我們每次上傳的二進位資訊整合存儲到一個檔案中，那麼最後這個檔案就是所上傳的檔案。

由於php.ini預設的上傳大小為2M，如果每批都上傳2M，我測試的時候時間比較長，這裡我將其限制大小該為20M,最大post資料為28M，以便於測試。如果實際開發中無法修改其參數，則每批上傳的資料不能超過最大限制。

post_max_size = 28M 
upload_max_filesize = 20M

我的是在nginx裡面上傳所以還需要修改Nginx設定檔/etc/nginx/nginx.con

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

#JavaScript中的File對象

在之前的文章中我們已經使用到了這個Api，File物件中保存了檔案的大小、名稱、類型等資訊

JavaScript中的Blob物件

Blob物件是二進位對象，也是File物件的父類，Blob物件中有一個很重要的方法：slice() 方法，利用這個方法我們可以把檔案內容切割成二進位資訊。 slice() 方法接受三個參數，起始偏移量，結束偏移量，還有可選的 mime 類型。如果 mime 類型，沒有設置，那麼新的 Blob 物件的 mime 類型和父級一樣。

上傳頁面index.php：

nbsp;html> 
 
 
  <meta> 
  <meta> 
  <title>大文件切割上传</title> 
  <link> 
  <script> 
    function selfile(){ 
      const LENGTH = 1024 * 1024 * 10;//每次上传的大小 
      var file = document.getElementsByName(&#39;video&#39;)[0].files[0];//文件对象 
      var filename=document.getElementsByName(&#39;video&#39;)[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> 
 
 
<h1 id="大文件切割上传">大文件切割上传</h1> 
<input> 
 

接收資料頁面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); 
} 
?>

測試之前，先建立uploads資料夾

如果是linux系統的話切記給uploads給權限

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼用Ajax非同步檢查使用者名稱有無重複

ajax取得json資料為undefined應該如何使用

以上是怎麼用ajax如何實現大檔案上傳的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！