PHP多个文件及图片上传实例详解

本文将详细讲解PHP多个文件及图片上传的过程，使读者能够了解如何使用PHP编写上传文件的功能。主要内容包括：

1. 表单上传方式
2. Ajax异步上传方式
3. 文件大小限制、类型限制
4. 上传进度条显示

1. 表单上传方式

表单上传方式是最常用的文件上传方式，其基本原理是利用

标签的enctype属性来指定表单数据的编码类型，将数据以二进制形式上传到服务器；PHP代码接收上传的数据并处理。

示例代码：

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file[]" multiple>
    <input type="submit" name="submit" value="上传">
</form>

上述代码中，action指定上传后的处理页面；method指定提交方式；enctype指定表单数据编码类型，其中multipart/form-data表示二进制编码。

PHP代码示例：

if(isset($_POST['submit'])){
    $files = $_FILES['file'];
    for($i=0;$i<count($files['name']);$i++){
        $tmp_name = $files['tmp_name'][$i];
        $name = $files['name'][$i];
        $size = $files['size'][$i];
        $error = $files['error'][$i];
        //处理上传逻辑代码
    }
}

上述代码中，通过$_FILES数组获取文件上传信息，其中$_FILES['file']表示上传文件的input元素的name属性值。使用for循环遍历上传文件，获取上传文件的临时文件名、文件原始名、文件大小和文件上传状态，进而进行上传文件的处理逻辑。

2. Ajax异步上传方式

与表单上传方式不同，Ajax异步上传方式无需刷新整个页面，实现更加流畅的上传体验。其原理是通过XMLHttpRequest对象将文件上传到服务器，服务器处理后返回数据。

示例代码：

var fileInput = document.getElementById('file');
var fileList = fileInput.files;
var form = new FormData();
for(var i=0;i<fileList.length;i++){
    form.append('file[]',fileList[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST','upload.php');
xhr.upload.onprogress = function(e){
    if(e.lengthComputable){
        var percent = e.loaded/e.total*100;
        console.log(percent);
    }
}
xhr.send(form);

上述代码中，获取上传文件的FileList，使用FormData将文件上传到服务器，利用XMLHttpRequest对象完成异步上传。其中xhr.upload.onprogress用于实现上传进度条显示。

PHP代码示例：

if(isset($_FILES['file'])){
    $files = $_FILES['file'];
    for($i=0;$i<count($files['name']);$i++){
        $tmp_name = $files['tmp_name'][$i];
        $name = $files['name'][$i];
        $size = $files['size'][$i];
        $error = $files['error'][$i];
        //处理上传逻辑代码
    }
    //返回数据格式为json
    echo json_encode(array('status'=>1,'message'=>'success'));
}

上述代码中，判断是否有上传文件，获取文件上传信息，进行文件上传处理，最后以json格式返回处理结果。

3. 文件大小限制、类型限制

为了保障上传文件的安全性，需要限制上传文件的大小和类型。

示例代码：

$maxSize = 1024*1024*10;//10M
$allowType = array('image/jpeg','image/png','image/gif');
if(isset($_FILES['file'])){
    $files = $_FILES['file'];
    for($i=0;$i<count($files['name']);$i++){
        $tmp_name = $files['tmp_name'][$i];
        $name = $files['name'][$i];
        $type = $files['type'][$i];
        $size = $files['size'][$i];
        $error = $files['error'][$i];
        if(!in_array($type,$allowType)){
            echo '上传文件类型不正确';
            exit;
        }
        if($size>$maxSize){
            echo '上传文件大小超过限制';
            exit;
        }
        //处理上传逻辑代码
    }
}

上述代码中，通过设置$maxSize和$allowType变量，分别限制上传文件的大小和类型。在上传文件前，使用判断语句进行限制判断，避免上传危险文件。

4. 上传进度条显示

为了提高用户体验，需要为上传文件添加进度条显示功能。

示例代码：

var xhr = new XMLHttpRequest();
xhr.onload = function(){
    if(xhr.status === 200){
        console.log('上传完成');
    }else{
        console.log('上传失败');
    }
}
xhr.upload.onprogress = function(e){
    if(e.lengthComputable){
        var percent = e.loaded/e.total*100;
        console.log(percent);
        //获取进度条元素并设置width属性
        var progress = document.getElementById('progress');
        progress.style.width = percent + '%';
    }
}
xhr.send(form);

上述代码中，利用XMLHttpRequest对象的upload属性的onprogress事件，实现上传进度条的动态显示。在上传过程中，获取上传进度，计算出上传进度所占百分比，设置进度条元素的width属性，从而实现上传进度条的动态显示。

综上所述，本文详细介绍了PHP多个文件及图片上传的实现方式，包括表单上传方式、Ajax异步上传方式、文件大小限制、类型限制和上传进度条显示。希望读者能够通过本文的介绍，掌握PHP实现文件上传的技能。