js+php大文件切割上传

//html部分

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="f" type="file" name="file" onchange="writeFile()">
<input type="hidden" name="picurl" id="pic_url" value="" />
<div style="width: 100px;height: 100px ;display: none" id="ShowImage" picurl=""></div>
</body>
<script src="UpImage.js"></script>
</html>

//js实现部分

var writeFile = function () {

    var temp = null;
    var formData = null;
    var xhr = null;
    var file = document.getElementById('f');
    var f = file.files[0];
    //alert(f.name);
    var totalSize = f.size;
    var btn = document.getElementById('t');
    // 每次截取的大小
    var num = 1000 * 1024;
    var start = 0;
    var end = start + num;
    // 发送到的地址
    var url = '/upload/fileupload.php';
    // 进度条
    var loaded = function (bili) {
        console.log(bili);
       // btn.style.width = bili + '%';
    };
    writeFile = function () {
        // 如果已经截取完了跳出这个函数。
        if (start >= totalSize)return;
        // 截取文件
        temp = f.slice(start, end);
        formData = new FormData();
        formData.append(file.name, temp);
        formData.append('fileName', f.name);

        xhr = new XMLHttpRequest();
        xhr.open('POST', url);

        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                // 改变下一次截取的位置
                start = end;
                end = start + num;
                // 因为截取可能超过totalSize，判断最后一次截取是否大于totalSize如果大于就直接让end等于totalSize
                if (end > totalSize) {
                    end = totalSize;
                }

                var headers =  JSON.parse(xhr.responseText)
                console.log(headers.data.ImageUrl)
                var ShowImage=document.getElementById('ShowImage');
                ShowImage.innerHTML="<img src="+headers.data.ImageUrl+" style=\"width: 100px;height: 100px ;\">";
                ShowImage.style.display ="block"
                ShowImage.setAttribute("picurl", headers.data.src);
                document.getElementById("pic_url").value=headers.data.src;
                // 可以用这个做进度条
                loaded((start / totalSize) * 100);
                // 递归，如果文件没有截取完，继续截取
                writeFile();
            }
        };
        xhr.send(formData);
    };

    // 调用一下
    writeFile();
};

//php 接收文件
uploadAction();

/*文件上传*/
function uploadAction()
{
    $name = $_POST['fileName'];

    $filename ='file';
    $path = 'upload';//设置上传文件的存储目录；
    //如果不存在上传文件夹，就自动创建；
    if (!file_exists($path)) {
        mkdir($path, 0777, true);
        chmod($path, 0777);
    }
    uploadFile($filename,$path,"",$name);
}

/*上传函数*/
function uploadFile($filename, $path, $typelist = null,$name)
{

    //1. 获取上传文件的名字
    $upfile = $_FILES[$filename];
    if (empty($typelist)) {
        $typelist = array("image/gif", "image/jpg", "image/jpeg", "image/png");//允许的文件类型
    }
    //$path="upload3"; //指定上传文件的保存路径（相对的）
    $res = array("error" => false);//存放返回的结果
    //2.过滤上传文件件的错误号
    if ($upfile["error"] > 0) {
        switch ($upfile["error"]) {
            case 1:
                $res["info"] = "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制";
                break;
            case 2:
                $res["info"] = "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项";
                break;
            case 3:
                $res["info"] = "文件只有部分被上传";
                break;
            case 4:
                $res["info"] = "没有文件被上传";
                break;
            case 6:
                $res["info"] = "找不到临时文件夹。";
                break;
            case 7:
                $res["info"] = "文件写入失败";
                break;
            default:
                $res["info"] = "未知错误！";
                break;
        }
        return $res;
    }

    //3.本次文件大小的限制
    if ($upfile["size"] > 10000*1000) {
        $res["info"] = "上传文件过大！";
        return $res;
    }

    //4. 过滤类型
/*    if (!in_array($upfile["type"], $typelist)) {
        $res["info"] = "上传类型不符！" . $upfile["type"];
        return $res;
    }*/

    //5. 初始化下信息(为图片产生一个随机的名字)
    $filenames=md5($upfile['name']);
    $fileinfo = pathinfo($name);

    session_start();
    if(isset($_SESSION[$filenames])){
        $FileDate=$_SESSION[$filenames];
        if($FileDate['time'] >time() ){
            $newfile=$FileDate['name'];
        }else{
            unset( $_SESSION[$filenames]);
            $newfile=GetFileName($fileinfo,$filenames);
        }
    }else{
        $newfile=GetFileName($fileinfo,$filenames);
    }


    //6. 执行上传处理
    $FilePath=$path . "/" . $newfile;
    if (is_uploaded_file($upfile["tmp_name"])) {
        if(file_exists($FilePath)){
            file_put_contents($FilePath, file_get_contents($_FILES['file']['tmp_name']), FILE_APPEND);
        }else{
            move_uploaded_file($upfile["tmp_name"],$FilePath);
        }
    } else {
        $res["info"] = "不是一个上传的文件！";
    }
    $res["info"] = $newfile;
    //返回图片地址
    $ImageUrl="/upload/upload/";
    exit(json_encode(array("code"=>200,"msg"=>"成功","data"=>array('src'=> $newfile,'ImageUrl'=>"$ImageUrl$newfile")))) ;
}

//生成文件名
function GetFileName($fileinfo,$filenames){
    do {
        $newfile = date("YmdHis") . rand(1000, 9999) . "." . $fileinfo["extension"];//随机产生一个的文件名
    } while (file_exists($newfile));
    $_SESSION[$filenames]=array("name"=>$newfile,"time"=>time()+10);
    return $newfile;
}

js+php大文件切割上传

猜你喜欢