zoukankan      html  css  js  c++  java
  • PHP Html5上传大文件

    html前台代码:

    <form id="upload_form" name="upload_form" action="javascript:init();"
    method="post" enctype="multipart/form-data">
        <div>
            <label for="file">
                请选择文件
            </label>
            &nbsp;上传到的地址为http://bi.xiaoyou-game.com/upload/类型/文件名
        </div>
        <div>
            <input type="file" id="file" name="file" onchange="fileReady()">
            <div>
                <input type="submit" id="submit" name="submit" value="上传">
                <button id="clear" onclick="clearUploadFile()">
                    清除
                </button>
                <div class="upload_message_show">
                    <!--进度条-->
                    <div class="upload_bar_box">
                        <div class="upload_bar">
                        </div>
                        <span class="upload_percent">
                        </span>
                    </div>
                    <!--上传剩余时间和上传速度-->
                    <div class="upload_count">
                        <div class="left_time">
                            剩余时间 | 00:00:00
                        </div>
                        <div class="speed">
                            100k/s
                        </div>
                    </div>
                    <!--文件信息-->
                    <div class="upload_file_message">
                        <div class="message_box">
                            <div class="upload_file_name">
                            </div>
                            <div class="upload_file_size">
                            </div>
                            <div class="upload_file_type">
                            </div>
                            <div class="upload_file_error">
                            </div>
                            <div class="isCompleted">
                            </div>
                        </div>
                        <!-- <div class="upload_file_preview"></div> -->
                    </div>
                </div>
    </form>
    </div>
    <img src="" id="compressTemp" style="display:none;">
    <canvas id="canvas" style="display:none;">
    </canvas>
    <script type="text/javascript" src="http://bi.xiaoyou-game.com/static/js/html5_upload_ano.js">
    </script>

    html5_upload_ano.js代码:

    var nSlice_count = 200,//分段数
        nFactCount,           //实际分段数
        nMin_size      = 0.5,//最小分段大小(M)
        nMax_size     = 5,  //最大分段大小(M)
        nFactSize,           //实际分段大小
        nCountNum     = 0,  //分段标号
        sFile_type,           //文件类型
        nFile_load_size,   //文件上传部分大小
        nFile_size,           //文件大小
        nPreuploaded = 0,  //上一次记录上传部分的大小
        bIs_uploading= false,//是否上传中
        bStart_upload= false,//是否开始上传
        bEnd_upload  = false;//是否上传完成
    
    
    function init(){
        var $con = document.getElementById("submit").value;
    
        bStart_upload = ($con=="上传"?true:false);
        if(bStart_upload)
        {
            if(!bEnd_upload)
            document.getElementById("submit").value = "暂停";
        }
        else
        {
            clearTimeout('timer');
            document.getElementById("submit").value = "上传";
        }
        if(!bEnd_upload && bStart_upload)
        startUpload();    
    }
    
    function startUpload(){
        var form = document.forms["upload_form"];
        if(form["file"].files.length<=0)
        {
            alert("请先选择文件,然后再点击上传");
            return;
        }    
    
        var file = form["file"].files[0];
    
        var get_file_message = (function(){
    
            var get_message = {
                get_name:function(){
                    return file.name;
                },
                get_type:function(){
                    return file.type;
    
                },
                get_size:function(){
                    return file.size;
                },
                getAll:function(){
                    return {
                        fileName : this.get_name(),
                        fileSize : this.get_size(),
                        fileType : this.get_type()    
                    }
                }
            };
            return get_message;
        })();
    
        var conversion = (function(){
            var unitConversion = {
                bytesTosize:function(data){
                    var unit = ["Bytes","KB","MB","GB"];
                    var i = parseInt(Math.log(data)/Math.log(1024));
                    return (data/Math.pow(1024,i)).toFixed(1) + " " + unit[i];
                },
                secondsTotime:function(sec){
                    var h = Math.floor(sec/3600),
                        m = Math.floor((sec-h*3600)/60),
                        s = Math.floor(sec-h*3600-m*60);
                    if(h<10) h = "0" + h;
                    if(m<10) m = "0" + m;
                    if(s<10) s = "0" + s;
    
                    return h + ":" + m + ":" + s + ":";
                }
            };
    
            return unitConversion;
        })();
    
        //start sending 
        var reader = new FileReader();
        var timer;
    
        var fProgress = function(e){
            var fSize = get_file_message.getAll().fileSize;
            timer = setTimeout(uploadCount(e,fSize,conversion),300);
        };
    
        var floadend = function(e){
            if(reader.error){alert("上传失败,出现未知错误");clearTimeout(timer);return;}
            clearTimeout(timer);
            if(nCountNum+1!=nFactCount)
            {
                if(bStart_upload)
                {
                    nCountNum++;
                    uploadStart();
                    return;
                } else {
                    document.querySelector(".speed").innerHTML = "0k/s";
                    document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";
                    return;
                }        
            }
    
            bEnd_upload = true;
            document.querySelector(".speed").innerHTML = "0k/s";
            document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";
            document.querySelector(".upload_percent").innerHTML = "100.00%";
            document.getElementById("submit").value = "上传";
            document.querySelector(".upload_bar").style.width = "100%";
    
            var $res = JSON.parse(e.target.responseText);
            filePreview($res);
            if($res.res=="success") {
                bIs_uploading =true;
                document.querySelector("#package_url").value=$res.package_url;
            }
            document.querySelector(".isCompleted").innerHTML="上传状态: " + (bIs_uploading?"上传完成":"正在上传..");
        };
    
        var uploadStart = function(){
            var get_all = get_file_message.getAll();
            var start = nCountNum * nFactSize,
                end   = Math.min(start+nFactSize,get_all.fileSize);
    
            var fData = new FormData();
    
            fData.append("file",file.slice(start,end));
            fData.append("name",file.name);
            fData.append("size",file.size);
            fData.append("type",file.type);
            fData.append("totalCount",nFactCount);
            fData.append("indexCount",nCountNum);
            
            //fData.append("crc32",CRC32(file.size));
            
            fData.append("trueName",file.name.substring(0,file.name.lastIndexOf(".")));
    
            if(!sFile_type)
            sFile_type = file.type.substring(0,file.type.indexOf("/"));
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress",fProgress,false);
            xhr.addEventListener("load",floadend,false);
            xhr.addEventListener("error",errorUp,false);
            xhr.addEventListener("abort",abortUp,false);
            
            xhr.open("POST","http://bi.xiaoyou-game.com/class/function/");  //后台php路径
            xhr.send(fData);
        };
    
        reader.onloadstart = function(){
            var get_all = get_file_message.getAll(),
                fName = get_all.fileName,
                fType = get_all.fileType,
                fSize = conversion.bytesTosize(get_all.fileSize);
    
            document.querySelector(".upload_message_show").style.display = "block";
            document.querySelector(".upload_file_name").innerHTML ="文件名称: " + fName;
            document.querySelector(".upload_file_type").innerHTML ="文件类型: " + fType;
            document.querySelector(".upload_file_size").innerHTML ="文件大小: " + fSize;
            document.querySelector(".isCompleted").innerHTML       ="上传状态: " + (bIs_uploading?"完成":"正在上传中..");
    
            nFactSize = Math.floor(get_all.fileSize/nSlice_count);
            nFactSize = (nFactSize>=nMin_size*1024*1024?nFactSize:nMin_size*1024*1024);
            nFactSize = (nFactSize<=nMax_size*1024*1024?nFactSize:nMax_size*1024*1024);
            nFactCount= Math.ceil(get_all.fileSize/nFactSize);
    
            uploadStart();
        };
    
    
        reader.readAsBinaryString(file);
    }
    
    function uploadCount(e,fSize,conversion){
        var upSize = e.loaded+nCountNum*nFactSize,
            perc = (upSize*100/fSize).toFixed(2) + "%";
        var speed = Math.abs(upSize - nPreuploaded);
        if(speed==0){clearTimeout("timer");return;}
        var leftTime = conversion.secondsTotime(Math.round((fSize-upSize)/speed));
        speed = conversion.bytesTosize(speed)+"/s";
        document.querySelector(".speed").innerHTML = speed;
        document.querySelector(".left_time").innerHTML = "剩余时间 | " + leftTime;
        document.querySelector(".upload_percent").innerHTML = perc;
        document.querySelector(".upload_bar").style.width = perc;
        nPreuploaded = upSize;
    }
    
    function messageChange(){
        document.querySelector(".upload_file_name").innerHTML ="文件名称: " ;
        document.querySelector(".upload_file_type").innerHTML ="文件类型: " ;
        document.querySelector(".upload_file_size").innerHTML ="文件大小: " ;
        document.querySelector(".isCompleted").innerHTML       ="上传状态: " ;
        document.querySelector(".upload_bar").style.width = "0%";
        document.querySelector(".upload_percent").innerHTML = "0%";
        //document.querySelector(".upload_file_preview").innerHTML ="";
        document.querySelector(".upload_message_show").style.display = "none";
    }
    
    function clearUploadFile(){
        var e = e || event;
        e.stopPropagation();
        e.preventDefault();
        document.getElementById("file").value = "";
        bStart_upload = false;
        messageChange();
    }
    
    
    function fileReady(){
        bIs_uploading = false;
        bEnd_upload = false;
        nCountNum = 0;
        bStart_upload = false;
        messageChange();
    }
    
    
    function errorUp(){
        bStart_upload = false;
        document.querySelector(".upload_file_error").innerHTML = "上传过程中出错";
    }
    
    function abortUp(){
        bStart_upload = false;
        document.querySelector(".upload_file_error").innerHTML = "网络故障,请检查重试";
    }
    
    function filePreview($src){
        var ftype = sFile_type;
        var $temp;
        var IMGMaxHeight = document.querySelector(".upload_message_show").offsetHeight;
        switch(ftype){
            case "image" :
            $temp = '<img src="source/'+$src.url+'" style="max-height:'+IMGMaxHeight+'px;margin-left:30%;">';
            break;
            case "audio" :
            $temp = '<audio src="source/'+$src.url+'" controls="controls"></audio>';
            break;
            case "video" :
            $temp = '<video src="source/'+$src.url+'" controls="controls"></video>';
            break;
            case "rar":
            $temp = '<span>rar文件;</span>';
            case "zip":
            $temp = '<span>zip文件</span>';
        }
        /*
    
        if(IsPreview)
        document.querySelector(".upload_file_preview").innerHTML = $temp;*/
    }

    PHP后台代码:

    public function do_upload()
        {
    
            $fsize = $_POST['size'];
            $findex =$_POST['indexCount'];
            $ftotal =$_POST['totalCount'];
            $ftype = $_POST['type'];
            $fdata = $_FILES['file'];
            $fname = mb_convert_encoding($_POST['name'],"gbk","utf-8");
            $type = end(explode(".",$fname));
            $allowed_type = array('apk','ipa','jpg','png','gif');
            if( !in_array($type,$allowed_type)){
                echo json_encode(array('res' => 'fail'));
                exit;
            }
            
            $truename = mb_convert_encoding($_POST['trueName'],"gbk","utf-8");
    
            $dir = PACKAGE_URL . $type ; //PACKAGE_URL为绝对路径,/var/www/....
            
            $save = $dir."/".$fname;
            if(!is_dir($dir))
            {
                mkdir($dir);
                chmod($dir,0777);//给文件夹以写的权限
            }
    
            //读取临时文件内容
            $temp = fopen($fdata["tmp_name"],"r+");//打开
            $filedata = fread($temp,filesize($fdata["tmp_name"]));//读取文件
    
            //将分段内容存放到新建的临时文件里面
            if(file_exists($dir."/".$findex.".tmp")) unlink($dir."/".$findex.".tmp");//是否存在当前的临时片名
            $tempFile = fopen($dir."/".$findex.".tmp","w+");//打开
    
            fwrite($tempFile,$filedata);//写入 
            fclose($tempFile);//关闭
    
            fclose($temp);
        
            if($findex+1==$ftotal)
            {
                if(file_exists($save)) @unlink($save);
                //循环读取临时文件并将其合并置入新文件里面
                for($i=0;$i<$ftotal;$i++)
                {
                    $readData = fopen($dir."/".$i.".tmp","r+");
                    $writeData = fread($readData,filesize($dir."/".$i.".tmp"));//读取文件
    
                    $newFile = fopen($save,"a+");
                    fwrite($newFile,$writeData);
                    
                    fclose($newFile);
                    
                    fclose($readData);
    
                    $resu = @unlink($dir."/".$i.".tmp"); 
                }          
                $fnewszie = filesize($dir."/".$fname);
    
                if($fsize==$fnewszie)
                {
                    $test = "succe";
                }else{
                    $test = "fail";
                } 
                
                $res = array("res"=>"success","test"=>$test,"fsize"=>$fsize,"newsize"=>$fnewszie,"url"=>mb_convert_encoding($truename."-".$fsize."/".$fname,'utf-8','gbk'),"package_url"=>'http://bi.xiaoyou-game.com/upload/'.$type.'/'.$fname);
        
                echo json_encode($res);
            }
    }
  • 相关阅读:
    debian 降级
    linux 常用查看设备命令
    viewstate
    linux图形界面编程基本知识
    Java 不适合编写桌面应用
    temp
    ASP.NET中26个常用性能优化方法
    三层架构与MVC的关系
    分页查询前台HTML+后台asp.net代码
    windows身份验证登入数据库 iis 无法访问数据库
  • 原文地址:https://www.cnblogs.com/feiwu123/p/5461041.html
Copyright © 2011-2022 走看看