javascript上传文件以及获取上传进度

//html页面先来一个上传文件的演示按钮：

<input type="file" name="file" id="fileInput">

//监听选择事件，选择后直接测试上传

    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (file) {
        uploadFile(file);
      }
    });

//第一种：直接上传文件：

function uploadFile(file) {
      const formData = new FormData();
      formData.append('file', file); // 将文件添加到 FormData 对象中
      fetch('/uploads/uploadfile.php', {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(data => {
          console.log('上传成功:', data);
        })
        .catch(error => {
          console.error('上传失败:', error);
        });
    }

//第二种：使用xhr带上传进度

function uploadFile(file) {
      const maxFileSize = 1024 * 1024 * 10; // 10MB

      if (file.size > maxFileSize) {
        alert('文件大小不能超过10MB');
        return;
      }

      const formData = new FormData();
      formData.append('file', file); // 将文件添加到 FormData 对象中

      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/uploads/uploadfile.php', true);

      xhr.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
          const percentComplete = (event.loaded / event.total) * 100;
          console.log(`上传进度: ${percentComplete.toFixed(2)}%`);
        }
      });

      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            try {
              const data = JSON.parse(xhr.responseText);
              alert('上传成功:', data);
            } catch (e) {
              alert('解析响应失败:', e);
            }
          } else {
            alert('上传失败:', xhr.status, xhr.statusText);
          }
        }
      };

      xhr.onerror = function() {
        alert('网络错误或请求被阻止');
      };
      console.log('准备发送请求');
      xhr.send(formData);
    }

//最后是服务端代码，这里使用php

//使用php写出一个测试，确定一下是否来了
$filename = "test.txt";
$content = "上传文件测试";

$fp = fopen($filename, "w");
fwrite($fp, $content);
fclose($fp);

//接收上传代码，支持任意文件上传，补充，判断文件大小，自生成上传密匙，避免恶意的post
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $file = $_FILES['file'];
    if ($file['error'] != UPLOAD_ERR_OK) {
        echo json_encode(['success' => false, 'message' => '文件上传失败']);
        exit;
    }
    $maxFileSize = 1024 * 1024 * 10; //想限制大小，必须在服务端限制，否则，懂得都懂
    $fileSize = $file['size'];
    if ($fileSize > $maxFileSize) {
        echo json_encode(['success' => false, 'message' => '文件大小超过限制']);
        exit;
    }
    $uploadDirectory = $_SERVER['DOCUMENT_ROOT'] . '/uploads/files/';
    $fileName = basename($file['name']);
    $uploadFilePath = $uploadDirectory . $fileName;

    if (move_uploaded_file($file['tmp_name'], $uploadFilePath)) {
        echo json_encode(['success' => true, 'message' => '文件上传成功']);
    } else {
        echo json_encode(['success' => false, 'message' => '文件上传失败']);
    }
} else {
    echo json_encode(['success' => false, 'message' => '无效的请求']);
}

×

*转载请注明出处：原文链接：https://cpp.vin/page/24.html