主頁(yè) > 知識(shí)庫(kù) > html+ajax實(shí)現(xiàn)上傳大文件功能

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

熱門標(biāo)簽:東平縣地圖標(biāo)注app 電銷機(jī)器人 長(zhǎng)春 立陶宛地圖標(biāo)注 地圖標(biāo)注推銷坑人 中國(guó)地圖標(biāo)注不明確情況介紹表 上海企業(yè)外呼系統(tǒng)價(jià)錢 大眾點(diǎn)評(píng)400電話怎么申請(qǐng) 怎樣在地圖標(biāo)注文字 河間市地圖標(biāo)注app

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

何為大文件切割上傳?

原理:利用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ù)不能超過(guò)最大限制。

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 類型,沒(méi)有設(shè)置,那么新的 Blob 對(duì)象的 mime 類型和父級(jí)一樣。

上傳頁(yè)面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ù)頁(yè)面upload.php:

?php 
/** 
 * 大文件切割上傳,把每次上傳的數(shù)據(jù)合并成一個(gè)文件 
 */ 
 
$filename = './uploads/'.$_POST['filename'];//確定上傳的文件名 
//第一次上傳時(shí)沒(méi)有文件,就創(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í)有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • jQuery Ajax 上傳文件處理方式介紹(推薦)
  • Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
  • jQuery Ajax文件上傳(php)
  • php+ajax實(shí)現(xiàn)圖片文件上傳功能實(shí)例
  • 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
  • 自己動(dòng)手打造ajax圖片上傳(網(wǎng)上沒(méi)有的)
  • jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
  • 基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條
  • 利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無(wú)刷新的具體方法
  • php ajax無(wú)刷新上傳圖片實(shí)例代碼

標(biāo)簽:益陽(yáng) 營(yíng)口 遼寧 本溪 四川 玉樹 銅川 內(nèi)江

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html+ajax實(shí)現(xiàn)上傳大文件功能》,本文關(guān)鍵詞  html+ajax,實(shí)現(xiàn),上傳,大,文件,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html+ajax實(shí)現(xiàn)上傳大文件功能》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于html+ajax實(shí)現(xiàn)上傳大文件功能的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章