大文件上传和进度条实现

文件上传的正常流程(php后台):

1.判断$_FILES数组是否为空：

    if(empty(!_FILES){
        die('上传发生严重错误!');//这里有可能是上传文件超过POST_MAX_SIZE
    };
    
    $file = !_FILES['file'];
    

2.通过error信息提示错误原因：

    if($file['error'] !=0){
        $errorMsg = '';
        switch($fiels['error']){
            case 1:
                $errorMsg = '超过2M';
                break;
            case 4:
                $errorMsg = '未选择文件';
                break;
            case 6:
                $errorMsg = '临时路径出错';
                break;
            default : 
                $errorMsg = '未知错误';
        }
        die("<h4>".$errorMsg."</h4>");
    }

3.判断是否是合法的http post上传的文件
    
    if(!is_uploaded_file($file['tmp_name'])){
        die('非法上传的文件！');
    }

4.判断文件大小是否满足人为设定要求
    
    $maxSize = 1.1 //单位：M
    if($file['size'] > $maxSize * 1024 * 1024){
        die('文件大小超过'.$maxSize.M);
    }

5.移动文件到永久目录

    $ext = strrchr($file['name'],'.'); //截取后缀名
    $savePath = './upload/'.date('YmdHis-').mt_rand(100,999).$ext; //一般用时间+随机数来命名文件名,防止重名
    $res =move_uploaded_file($_file['tmp_name'],$savePath);//移动到永久目录
    if($res){
        echo '$file['name']'.'上传成功！';
    }else{
        echo '$file['name']'.'上传失败！';
    }
复制代码

文件上传涉及概念(php后台):

$_FILES数组详解:

结构:二维数组
       Array
    (
        [upload] => Array
            (
                [name] => bg-1.jpg 
                [type] => image/jpeg
                [tmp_name] => C:\Users\ls\AppData\Local\Temp\php9D7D.tmp
                [error] => 0
                [size] => 180083
            )
    )
    
    1. $_FILES['myFile']['name'] : 文件原始名
    2. $_FILES['myFile']['type'] : 文件类型
    3. $_FILES['myFile']['tmp_name'] : 文件的临时路径
    4. $_FILES['myFile']['error'] : 文件上传的错误代码
         0: 文件上传到临时路径成功(将来文件由临时路径移动到永久目录)
         1: 上传的文件超过了php.ini 中upload_max_filesize选项(默认2M)限制的值
         2: 上传的文件超过了input标记设置的MAX_FILE_SIZE值
         4: 未选择文件
         6: 找不到临时文件夹
    5. $_FILES['myFile']['size'] : 文件大小
     
     注意:
         1.上传文件超出POST_MAX_SIZE时,数组$_FILE为空,此时无错误提示
         2.上传文件超过UPLOAD_MAX_SIZE时,但是没有超过8M,$_FILES中可以查看error信息
         3.可以通过<input type="hidden" name="MAX_FILE_SIZE" value="30000">实现浏览器对文件大小的初步判断,避免过大文件不必要的上传造成的浪费时间,需要设置在文件域之前
         4.在php.ini中可以修 post_max_size 和 upload_max_filesize 来修改文件上传的限制上限
复制代码

文件上传的正常流程(前端)

html：

 <form action="./files-1.php" method="post" enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="30000">
     文件: <input type="file" name="upload" id="">
     
     <!--进度条-->
     <div style="width:30px;height:30px;border=1px solid red">
        <div id="jdt" style="height:30px"></div>
     </div>
     <!--进度条-->
     <br>
    <input type="button" value="上传" onclick="getInfo()"> 
</form>

注意点:
1.form表单属性 action:后台脚本路径,  method="post"   enctype="multipart/form-data"
2.涉及文件上传的表单如果使用ajax无刷新上传需要使用formData表单对象进行数据收集

js:

<script>
    
    //方式1： 使用ajax结合formData表单对象实现页面无刷新提交:(除此之外还可以使用原始的form表单提交，但是用户体验不好)
    
    function getInfo(){
        var fm = document.getElementsByTagName('form')[0];
        var jdt = document.getElementById('jdt');//进度条盒子
        var fd = new FormData(fm); //实例化表单对象
        var xhr = new XMLHttpRequest();
        xhr.open('post','./files-1.php');
        
        // 进度条逻辑 :
        xhr.upload.onprogress = function(evt){
            // 计算百分比：已上传的/总文件大小
            percent = (evt.loaded/evt.total).toFixed(2);    
            // 根据百分比计算进度条宽度
            jdt_width = percent * 300;
            
            jdt.style.width = jdt_width + 'px';
            jdt.style.backgroundColor = 'red';
        }
        // 进度条逻辑
        
        xhr.send(fd);//发送数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
               alert(xhr.responseText);
            }
        }
    }
</script>
复制代码

进度条实现：

进度条：在大文件上传情况下出现，告知用户上传进度
    
    1.在php.ini文件中修改 post_max_size (调整表单可上传数据的上限) 和 upload_max_filesize (调整上传文件的上限)
    2.进度条：大盒子套小盒子，通过改变小盒子宽显示进度
    3.核心：实时获取已上传文件的大小和文件的总大小,计算百分比：在XMLHttpRequest对象中有一个upload对象，它上面有一个onprogress事件约100ms触发一次
    4.核心：onprogress事件触发可以获取一个事件对象，上面有属性loaded和total分别代表已上传部分的大小和文件的总大小
复制代码

转载于:https://juejin.im/post/5c7df5ebe51d4528ab5cf551