input type="file" 文件上传的详细介绍

一、选取并上传文件

input type="file" 是用于选择本地文件并上传到服务器的功能。在实现过程中，需要注意以下几点：

1、input 标签的 name、id、accept 属性

  name 属性用于服务器接收传来的文件的参数名，id 属性用于 JS 操作 DOM，accept 属性可限制文件类型和大小。例如：

    <input type="file" name="file" id="file" accept=".jpg,.png" />

2、JS 获取上传的文件及其文件名

  通过 JS 获取 input 标签的 value，即文件路径，我们可以获得文件的文件名：

    let selectedFile = document.getElementById('file').files[0];
    console.log(selectedFile.name);

3、发送 POST 请求上传文件

  实现文件上传最常见的方法是使用表单提交，即 POST 方法。我们需要将文件转化为二进制数据进行传输，同时需要设置请求头和表单数据，代码如下：

    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    formData.append('file', selectedFile, selectedFile.name);
    xhr.open('POST', 'upload.php', true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.send(formData);

二、文件上传进度条

为了提高用户体验，我们可以增加文件上传进度条。

1、监听事件 onprogress 和 onload

  通过监听事件 onprogress 和 onload，我们可以获得上传进度和上传完成的信息。其中，loaded 属性表示上传的字节数，total 属性表示文件的总字节数。

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            let percentComplete = Math.round((event.loaded / event.total) * 100);
            console.log(percentComplete + '% uploaded');
        }
    };
    xhr.onload = function() {
        console.log(xhr.responseText);
    };

2、实现进度条样式

  在 HTML 中，我们可以设置一个进度条样式：

    <div class="progress-bar"></div>

  在 CSS 中，我们可以设置进度条样式：

    .progress-bar {
        width: 0%;
        height: 20px;
        background-color: green;
    }

  在 JS 中，我们可以实现进度条的动画效果，代码如下：

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            let percentComplete = Math.round((event.loaded / event.total) * 100);
            console.log(percentComplete + '% uploaded');
            let progressBar = document.querySelector('.progress-bar');
            progressBar.style.width = percentComplete + '%';
        }
    };
    xhr.onload = function() {
        console.log(xhr.responseText);
        let progressBar = document.querySelector('.progress-bar');
        progressBar.style.width = '100%';
    };

三、后台接收文件并保存

1、服务器可以使用 PHP 来接收文件，PHP 提供了一个 $_FILES 全局变量，用于存储上传文件的信息。代码如下：

    $file = $_FILES['file'];
    move_uploaded_file($file['tmp_name'], 'uploads/'.$file['name']);
    echo 'success';

2、在 move_uploaded_file 函数中，第一个参数是源文件路径，第二个参数是目标文件路径。在目标文件路径中，可以指定文件的存储位置和文件名。

3、为了防止文件重名，可以在文件名中添加时间戳等随机数，如：

    $file = $_FILES['file'];
    $timestamp = time();
    move_uploaded_file($file['tmp_name'], 'uploads/'.$timestamp.'_'.$file['name']);
    echo 'success';

四、安全性考虑

1、客户端限制文件类型和大小

  通过设置 input 标签的 accept 属性，可以限制文件类型，通过设置 input 标签的 size 属性，可以限制文件大小。

2、解决文件上传漏洞

  文件上传漏洞是指攻击者通过上传恶意文件，在网站服务器上执行恶意代码。为了解决文件上传漏洞，可以采用以下方法：

  ①在服务端对上传的文件进行检查和限制，如限制上传文件类型和大小；

  ②在客户端对文件进行验证和过滤，如限制文件类型和大小；

  ③对上传文件的后缀名进行检查，如 js、php、html 等文件不能正常解析；

  ④对服务器上的上传文件进行隔离和限制权限，即避免上传文件可以访问或修改其他文件。

五、总结

以上是 input type="file" 文件上传的详细介绍。通过合理的限制和措施，我们可以使文件上传的功能更加安全、可靠、用户友好。