html+ajax實現上傳大文件功能

來源：懂視網責編：小采時間：2020-11-27 22:51:32

html+ajax實現上傳大文件功能

html+ajax實現上傳大文件功能:大家都知道php上傳文件有限制，如果沒有修改過php.ini文件的話，默認的上傳大小限制為2M，那么該如何上傳大文件了，比如說上傳一個1G多的大文件，可以使用大文件切割上傳的方式來解決。何為大文件切割上傳？原理：利用HTML5的新特性，將文件內容切割成分

推薦度：

點擊下載本文 文檔為doc格式

導讀html+ajax實現上傳大文件功能:大家都知道php上傳文件有限制，如果沒有修改過php.ini文件的話，默認的上傳大小限制為2M，那么該如何上傳大文件了，比如說上傳一個1G多的大文件，可以使用大文件切割上傳的方式來解決。何為大文件切割上傳？原理：利用HTML5的新特性，將文件內容切割成分

大家都知道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！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

html+ajax實現上傳大文件功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：上傳大文件 html

熱門焦點

html+ajax實現上傳大文件功能

html+ajax實現上傳大文件功能

html+ajax實現上傳大文件功能

最新推薦

猜你喜歡

熱門推薦