html+ajax上傳大檔案
阿新 • • 發佈:2019-02-09
大家都知道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:
<!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('POST','upload.php',false); blob = file.slice(start,end);//根據長度擷取每次需要上傳的資料 fd.append('video',blob);//新增資料到fd物件中 fd.append('filename',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 = './uploads/'.$_POST['filename'];//確定上傳的檔名
//第一次上傳時沒有檔案,就建立檔案,此後上傳只需要把資料追加到此檔案中
if(!file_exists($filename)){
move_uploaded_file($_FILES['video']['tmp_name'],$filename);
}else{
file_put_contents($filename,file_get_contents($_FILES['video']['tmp_name']),FILE_APPEND);
}
?>
測試之前,先建立uploads資料夾
如果是linux系統的話 切記給uploads給許可權
sudo chmod -R 777 uoloads/ //賦予uploads資料夾 777 許可權 -R 遞迴子檔案
end!