当前位置：首页 > 行业动态 > 正文

html手机上传视频到主机里

admin
行业动态
2025-05-03
2

使用HTML表单配合JavaScript，通过选择视频，利用FormData封装数据，设置请求头’Content-Type’为’multipart/form-data’，通过fetch API以POST方式

前端HTML页面设计

创建视频上传表单

使用<form>标签配合<input type="file">实现文件选择，需设置accept属性限制文件类型为视频。

html手机上传视频到主机里第1张

<form action="upload.php" method="post" enctype="multipart/form-data">
  <label>选择视频：</label>
  <input type="file" name="video" accept="video/" capture="camcorder">
  <button type="submit">上传</button>
</form>

参数说明	作用
`accept="video/"`	限制文件类型为视频
`capture="camcorder"`	优先调用手机摄像头录制（可选）
`enctype="multipart/form-data"`	启用文件上传编码

添加进度显示（可选）

<progress id="uploadProgress" value="0" max="100"></progress>
<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', () => {
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', e => {
      document.getElementById('uploadProgress').value = (e.loaded / e.total)  100;
    });
    // 其他AJAX配置...
  });
</script>

后端接收与处理（以PHP为例）

基础接收代码

<?php
$targetDir = "uploads/";
if (!is_dir($targetDir)) {
    mkdir($targetDir, 0755, true);
}
$file = $_FILES['video'];
$newFileName = time() . '_' . basename($file["name"]);
$targetFile = $targetDir . $newFileName;
if (move_uploaded_file($file["tmp_name"], $targetFile)) {
    echo "上传成功：$newFileName";
} else {
    echo "上传失败";
}
?>

关键函数	作用
`move_uploaded_file()`	移动临时文件到目标位置
`basename()`	获取原始文件名
`time()`	生成时间戳避免重名

安全性增强

// 验证文件类型
$allowedTypes = ['video/mp4', 'video/avi', 'video/webm'];
if (!in_array($file["type"], $allowedTypes)) {
    die("不支持的文件类型");
}
// 限制文件大小（例如100MB）
if ($file["size"] > 100  1024  1024) {
    die("文件过大");
}
// 安全文件名处理
$safeName = preg_replace("/[^a-zA-Z0-9_-]/", "", $file["name"]);
$newFileName = time() . "_" . $safeName;

服务器环境配置

配置项	说明
文件目录权限	设置`uploads`目录权限为`755`或`777`
PHP配置	修改`php.ini`： `upload_max_filesize = 200M` `post_max_size = 200M`
跨域配置	若前后端分离，需设置CORS头： `header("Access-Control-Allow-Origin: ");`

常见问题与解决方案

问题现象	解决方案
上传后视频无法播放	检查MIME类型是否匹配，确保服务器未压缩视频文件
Android机无法选择本地视频	添加`multiple`属性支持多选：`<input type="file" multiple>`
大文件上传中断	分割上传（需前端支持）延长PHP执行时间：`set_time_limit(0);`