1. 程式人生 > >實現大檔案上傳的辦法

實現大檔案上傳的辦法

方法一:

  • 對ini進行修改

file_uploads = on;//是否允許通過http上傳檔案的開關(預設為開)

upload_max_filesize = 8m // php允許最大上傳檔案大小

post_max_size = 8m;//表單post提交允許最大上傳檔案大小

max_execution_time = 30;// php頁面執行最大時間(預設30s)

max_input_time = 60;// php頁面接收資料允許最大時間(預設60s)

記憶體限制= 8m;// php佔用最大記憶體(預設8m)

方法二:

  • 實現大檔案斷點續傳

思路:

  • 將大檔案看成是由多個小檔案組成的(從1kb到500kb為1檔案,從501kb到1000kb為2檔案,以此類推;利用javascript函式slice()完成)
  • 將這些小檔案在後臺組合成一個大檔案(利用php函式)

html+javascript:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8"/>  
        <title>斷點續傳</title>  
    </head>  
    <body>  
        <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">  
            將圖片拖拽到此  
        </div>  
          
        <progress value="0" max="10" id="prouploadfile"></progress>  
          
        <span id="persent">0%</span>  
        <br />  
        <!--<button onclick="xhr2()">ajax上傳</button>-->     
        <button onclick="stopup()" id="stop">上傳</button>      
        <script>  
        //拖拽上傳開始  
        //-1.禁止瀏覽器開啟檔案行為  
        document.addEventListener("drop",function(e){  //拖離   
            e.preventDefault();      
        })  
        document.addEventListener("dragleave",function(e){  //拖後放   
            e.preventDefault();      
        })  
        document.addEventListener("dragenter",function(e){  //拖進  
            e.preventDefault();      
        })  
        document.addEventListener("dragover",function(e){  //拖來拖去    
            e.preventDefault();      
        })  
        //上傳進度  
        var pro = document.getElementById('prouploadfile');  
        var persent = document.getElementById('persent');  
        function clearpro(){  
            pro.value=0;  
            persent.innerHTML="0%";  
        }  
          
        //2.拖拽  
        var stopbutton = document.getElementById('stop');  
          
        var resultfile=""  
        var box = document.getElementById('drop_area'); //拖拽區域     
        box.addEventListener("drop",function(e){           
            var fileList = e.dataTransfer.files; //獲取檔案物件    
            console.log(fileList)  
            //檢測是否是拖拽檔案到頁面的操作            
            if(fileList.length == 0){                
                return false;            
            }             
            //拖拉圖片到瀏覽器,可以實現預覽功能    
            //規定視訊格式  
            //in_array  
            Array.prototype.S=String.fromCharCode(2);  
            Array.prototype.in_array=function(e){  
                var r=new RegExp(this.S+e+this.S);  
                return (r.test(this.S+this.join(this.S)+this.S));  
            };  
            var video_type=["video/mp4","video/ogg"];  
              
            //建立一個url連線,供src屬性引用  
            var fileurl = window.URL.createObjectURL(fileList[0]);                
            if(fileList[0].type.indexOf('image') === 0){  //如果是圖片  
                var str="<img width='200px' height='200px' src='"+fileurl+"'>";  
                document.getElementById('drop_area').innerHTML=str;                   
            }else if(video_type.in_array(fileList[0].type)){   //如果是規定格式內的視訊                    
                var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";  
                document.getElementById('drop_area').innerHTML=str;        
            }else{ //其他格式,輸出檔名  
                //alert("不預覽");  
                var str="檔名字:"+fileList[0].name;  
                document.getElementById('drop_area').innerHTML=str;      
            }         
            resultfile = fileList[0];     
            console.log(resultfile);      
              
            //切片計算  
            filesize= resultfile.size;  
            setsize=500*1024;  
            filecount = filesize/setsize;  
            //console.log(filecount)  
            //定義進度條  
            pro.max=parseInt(Math.ceil(filecount));   
              
              
              
            i =getCookie(resultfile.name);  
            i = (i!=null && i!="")?parseInt(i):0  
              
            if(Math.floor(filecount)<i){  
                alert("已經完成");  
                pro.value=i+1;  
                persent.innerHTML="100%";  
              
            }else{  
                alert(i);  
                pro.value=i;  
                p=parseInt(i)*100/Math.ceil(filecount)  
                persent.innerHTML=parseInt(p)+"%";  
            }  
              
        },false);    
          
        //3.ajax上傳  
  
        var stop=1;  
        function xhr2(){  
            if(stop==1){  
                return false;  
            }  
            if(resultfile==""){  
                alert("請選擇檔案")  
                return false;  
            }  
            i=getCookie(resultfile.name);  
            console.log(i)  
            i = (i!=null && i!="")?parseInt(i):0  
              
            if(Math.floor(filecount)<parseInt(i)){  
                alert("已經完成");  
                return false;  
            }else{  
                //alert(i)  
            }  
            var xhr = new XMLHttpRequest();//第一步  
            //新建一個FormData物件  
            var formData = new FormData(); //++++++++++  
            //追加檔案資料  
              
            //改變進度條  
            pro.value=i+1;  
            p=parseInt(i+1)*100/Math.ceil(filecount)  
            persent.innerHTML=parseInt(p)+"%";  
            //進度條  
              
              
            if((filesize-i*setsize)>setsize){  
                blobfile= resultfile.slice(i*setsize,(i+1)*setsize);  
            }else{  
                blobfile= resultfile.slice(i*setsize,filesize);  
                formData.append('lastone', Math.floor(filecount));  
            }  
                formData.append('file', blobfile);  
                //return false;  
                formData.append('blobname', i); //++++++++++  
            formData.append('filename', resultfile.name); //++++++++++  
                //post方式  
                xhr.open('POST', 'duandian.php'); //第二步驟  
                //傳送請求  
                xhr.send(formData);  //第三步驟  
                stopbutton.innerHTML = "暫停"  
                //ajax返回  
                xhr.onreadystatechange = function(){ //第四步  
                if ( xhr.readyState == 4 && xhr.status == 200 ) {  
                  console.log( xhr.responseText );  
                        if(i<filecount){  
                            xhr2();  
                        }else{  
                            i=0;  
                        }         
                }  
              };  
                //設定超時時間  
                xhr.timeout = 20000;  
                xhr.ontimeout = function(event){  
                alert('請求超時,網路擁堵!低於25K/s');  
              }           
                  
                i=i+1;  
                setCookie(resultfile.name,i,365)  
                  
        }  
          
        //設定cookie  
        function setCookie(c_name,value,expiredays)  
        {  
            var exdate=new Date()  
            exdate.setDate(exdate.getDate()+expiredays)  
            document.cookie=c_name+ "=" +escape(value)+  
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")  
        }  
        //獲取cookie  
        function getCookie(c_name)  
        {  
        if (document.cookie.length>0)  
          {  
          c_start=document.cookie.indexOf(c_name + "=")  
          if (c_start!=-1)  
            {   
            c_start=c_start + c_name.length+1   
            c_end=document.cookie.indexOf(";",c_start)  
            if (c_end==-1) c_end=document.cookie.length  
            return unescape(document.cookie.substring(c_start,c_end))  
            }   
          }  
        return ""  
        }  
          
          
        function stopup(){  
            if(stop==1){  
                stop = 0  
                  
                xhr2();  
            }else{  
                stop = 1  
                stopbutton.innerHTML = "繼續"  
                  
            }  
              
        }  
        </script>  
    </body>  
</html>

php:
<?php  
//$name=$_POST['username'];  
$dir=$_POST['filename'];  
$dir="uploads/".md5($dir);  
file_exists($dir) or mkdir($dir,0777,true);  
  
  
$path=$dir."/".$_POST['blobname'];  
  
  
//print_r($_FILES["file"]);  
move_uploaded_file($_FILES["file"]["tmp_name"],$path);  
  
if(isset($_POST['lastone'])){  
    echo $_POST['lastone'];  
    $count=$_POST['lastone'];  
      
    $fp   = fopen($_POST['filename'],"abw");  
    for($i=0;$i<=$count;$i++){  
        $handle = fopen(filename, mode)($dir."/".$i,"rb");    
        fwrite($fp,fread($handle,filesize($dir."/".$i)));    
        fclose($handle);      
    }  
    fclose($fp);  
}  
      
      
?>

相關推薦

實現檔案辦法

方法一: 對ini進行修改file_uploads = on;//是否允許通過http上傳檔案的開關(預設為開) upload_max_filesize = 8m // php允許最大上傳檔案大小 post_max_size = 8m;//表單post提交允許最大上傳檔案大

C#實現檔案功能(二)---webuploader

                                        一、問題來源 近些時候,處理專案的時候發現如果使用者上傳大檔案的時候使用HtmlInputFile通過httppostfilebase 來實現上傳,如果檔案較小的話較小的話,上傳沒有問題(4M)

java實現檔案

檔案上傳是最古老的網際網路操作之一,20多年來幾乎沒有怎麼變化,還是操作麻煩、缺乏互動、使用者體驗差。 一、前端程式碼 英國程式設計師Remy Sharp總結了這些新的介面 ,本文在他的基礎之上,討論在前端採用HTML5的API,對檔案上傳進行漸進式增強: * iframe上傳    *

webuploader實現檔案

目前在公司專案裡遇到了需要上傳大檔案(視訊、音訊)的情況,特此記錄。 此次專案引用了一款名為Webuploader的外掛。官網:http://fex.baidu.com/webuploader/getting-started.html html程式碼: <html

使用百度webuploader實現檔案

 寫在前面           後臺的上傳檔案,都是50M左右比較小,後面說需要上傳大一點500M以上的,一直沒整過這方面的,昨天在網上看下其他人的實現方式,東看看西借鑑之後就有了下面的東西 第一部分 頁面         頁面實現了簡單的分片上傳檔案        

利用WebUploader實現檔案和視訊

檔案上傳是網站開發必不可少的,常見的有圖片上傳。但是大檔案和視訊上傳不常見。這裡我將自己寫的視訊上傳demo貼出來供大家參考: 利用是最新的WebUploader外掛請 下載使用最新版即可 js程式碼 _extensions ='3gp,mp4,rmvb,mov,avi,

Java 使用 FTP 實現檔案下載

Java 上傳下載 1G 以上的檔案可以通過 http 協議或 ftp 實現,但是 http 協議對檔案上傳大小有限制,而且還不穩定,因此這裡使用 ftp 上傳。 ftp 上傳方式有兩種: 一、ASCII 傳輸方式:假定使用者正在拷貝的檔案包含

前端元件WebUploader檔案與Python結合的實現

Python實現大檔案分片上傳 引言 想借著這篇文章簡要談談WebUploader大檔案上傳與Python結合的實現。 WebUploader是百度團隊對大檔案上傳的前端實現,而後端需要根據不同的語言自己實現。這裡我採用Python語言的Flask框架搭建後端,

用Java實現FTP批量檔案下載(一)

本文介紹了在Java中,如何使用Java現有的可用的庫來編寫FTP客戶端程式碼,並開發成Applet控制元件,做成基於Web的批量、大檔案的上傳下載控制元件。文章在比較了一系列FTP客戶庫的基礎上,就其中一個比較通用且功能較強的j-ftp類庫,對一些比較常見的功能如進度條、

檔案那些事兒:多圖檔案、斷點續功能實現與分析

簡介 看了不少的教程,在系統整合搭建的過程中一般寫到檔案上傳這一節時,基本上實現一個檔案上傳功能就不再繼續拓展,而是就此截止轉而去講解其他的內容了,因為企業級應用開發中這些功能肯定會使用到,企業網站的檔案上傳不可能只有一個單圖上傳,也不可能不實現大檔案的功能處

用Java實現FTP批量檔案下載(四)

六、FTP埠對映 FTP的資料連線有PASV和PORT兩種,如果你的FTP伺服器位於內網中,需要做埠對映。筆者剛開始時對FTP的網外網對映也是不怎麼了解,因此開始走了不少的彎路,開始一直以為是自己的程式有問題,浪費了不少時間,希望通過這段,能讓大家在開發的時候少花或不花這些

用Java實現FTP批量檔案下載(五) --執行效果圖

八、執行效果   1.上傳 (1).啟動上傳上面 (2).上傳中 (3).上傳中 (4).上傳成功 2.下載 (1)下載檔案的儲存路徑 (2)下載中 (3)下載中 (4)下載成功 九、小結 在本文中,筆者將在實際專案中的上傳下載

用Java實現FTP批量檔案下載(五)

八、執行效果   1.上傳 (1).啟動上傳上面 (2).上傳中 (3).上傳中 (4).上傳成功 2.下載 (1)下載檔案的儲存路徑 (2)下載中  (3)下載中  (4)下載成功 九、小結 在本文中,筆者將在實際專案中的上傳下載問題的解決方案進行了闡述,通過採用FTP協

POI 實現 Excel 檔案下載及資料匯出處理

Java 中操作 Excel 的有兩種比較主流的工具包: JXL 和 POI 。JXL 只能操作 Excel 95、97、2000 等老版本格式資料,也即以 .xls 為字尾的 excel。而 POI 可以操作 Excel 95 及以後的版本,即可操作字尾為 .xls 和 .

給大家分享一篇 http協議之檔案實現,輕鬆支援檔案

最近在公司進行業務開發時遇到了一些問題,當需要上傳一個較大的檔案時,經常會遇到記憶體被大量佔用的情況。公司之前使用的web框架是一個老前輩實現的。在實現multipart/form-data型別的post請求解析時, 是將post請求體一次性讀到記憶體中再做解析

Spring MVC實現MultipartFile檔案功能

前端 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改資訊</title> </head> <body

javaweb實現圖片檔案

圖片上傳到檔案中,可以直接上傳圖片到目錄中,也還可以將圖片檔名、檔案路徑寫入到資料庫中,也可以在程式中動態的建立檔案路徑。 參看:http://blog.csdn.net/lmdcszh/article/details/9201173 package com.ioif.wha.ima

TP5實現檔案及展示

view層上傳: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body&

jq實現前端檔案

FormData FormData是XMLHttpRequest Level 2 新增的一個介面。 使用FormData可以實現各種檔案上傳。   使用 // 建立FormData的例項 var formdata = new FormData(); // 用append()為例項新

webuploader實現檔案

問題:  1: 上傳失敗,不知道怎麼在服務端寫返回值?  2: 做個多檔案上傳怎麼辦?  1:上傳失敗,不知道怎麼在服務端寫返回值? (1):首先在初始化Web Uploader  的方法寫上 server: 'http://localho