欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html+ajax實(shí)現(xiàn)上傳大文件功能

 更新時(shí)間：2017年11月13日 11:55:59   作者：weialemon  
這篇文章主要為大家詳細(xì)介紹了html+ajax實(shí)現(xiàn)上傳大文件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

大家都知道php上傳文件有限制，如果沒有修改過php.ini文件的話，默認(rèn)的上傳大小限制為2M，那么該如何上傳大文件了，比如說上傳一個(gè)1G多的大文件，可以使用大文件切割上傳的方式來解決。

何為大文件切割上傳？

原理：利用HTML5的新特性，將文件內(nèi)容切割成分段的二進(jìn)制信息，然后每次向服務(wù)器上傳一段，而服務(wù)器，只需要把我們每次上傳的二進(jìn)制信息整合存儲(chǔ)到一個(gè)文件中，那么最后這個(gè)文件就是所上傳的文件。

由于php.ini默認(rèn)的上傳大小為2M，如果每批都上傳2M，我測(cè)試的時(shí)候時(shí)間比較長(zhǎng)，這里我將其限制大小該為20M,最大post數(shù)據(jù)為28M，便于測(cè)試。如果實(shí)際開發(fā)中不能修改其參數(shù)，則每批上傳的數(shù)據(jù)不能超過最大限制。

post_max_size = 28M 
upload_max_filesize = 20M

我的是在nginx里面上傳所以還需要修改Nginx配置文件/etc/nginx/nginx.con

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

JavaScript中的File對(duì)象

在之前的文章中我們已經(jīng)使用到了這個(gè)Api，F(xiàn)ile對(duì)象中保存了文件的大小、名稱、類型等信息

JavaScript中的Blob對(duì)象

Blob對(duì)象是二進(jìn)制對(duì)象，也是File對(duì)象的父類，Blob對(duì)象中有一個(gè)很重要的方法：slice() 方法，利用這個(gè)方法我們可以把文件內(nèi)容切割成二進(jìn)制信息。slice() 方法接受三個(gè)參數(shù)，起始偏移量，結(jié)束偏移量，還有可選的 mime 類型。如果 mime 類型，沒有設(shè)置，那么新的 Blob 對(duì)象的 mime 類型和父級(jí)一樣。

上傳頁面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];//文件對(duì)象 
      var filename=document.getElementsByName('video')[0].files[0].name; 
      var totalSize = file.size;//文件總大小 
      var start = 0;//每次上傳的開始字節(jié) 
      var end = start + LENGTH;//每次上傳的結(jié)尾字節(jié) 
      var fd = null//創(chuàng)建表單數(shù)據(jù)對(duì)象 
      var blob = null;//二進(jìn)制對(duì)象 
      var xhr = null;//xhr對(duì)象 
      while(start < totalSize){ 
        fd = new FormData();//每一次需要重新創(chuàng)建 
        xhr = new XMLHttpRequest();//需要每次創(chuàng)建并設(shè)置參數(shù) 
        xhr.open('POST','upload.php',false); 
        blob = file.slice(start,end);//根據(jù)長(zhǎng)度截取每次需要上傳的數(shù)據(jù) 
        fd.append('video',blob);//添加數(shù)據(jù)到fd對(duì)象中 
        fd.append('filename',filename); //獲取文件的名稱 
        xhr.send(fd);//將fd數(shù)據(jù)上傳 
 
        //重新設(shè)置開始和結(jié)尾 
        start = end; 
        end = start + LENGTH; 
 
      } 
 
    } 
  </script> 
</head> 
<body> 
<h1>大文件切割上傳</h1> 
<input type="file" name="video" onchange="selfile();" /> 
</body> 
</html>

接收數(shù)據(jù)頁面upload.php：

<?php 
/** 
 * 大文件切割上傳，把每次上傳的數(shù)據(jù)合并成一個(gè)文件 
 */ 
 
$filename = './uploads/'.$_POST['filename'];//確定上傳的文件名 
//第一次上傳時(shí)沒有文件，就創(chuàng)建文件，此后上傳只需要把數(shù)據(jù)追加到此文件中 
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); 
} 
?>

測(cè)試之前，先創(chuàng)建uploads文件夾

如果是linux系統(tǒng)的話 切記給uploads給權(quán)限

sudo chmod -R 777 uoloads/  //賦予uploads文件夾 777 權(quán)限  -R 遞歸子文件

end！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論