• php+html+js+ajax实现文件上传

    php+html+js+ajax实现文件上传

    目录

    一、表单单文件上传

    1、上传页面

    2、接受文件上传php

    二、表单多文件上传

    1、上传页面

    2、接受文件上传php 

    三、表单异步xhr文件上传

    1、上传页面

    2、接受文件上传php  

    四、表单异步ajax文件上传 

    1、上传页面

    2、接受文件上传php   

    一、表单单文件上传
    1、上传页面
    1. html>
    2. <html>
    3. <meta charset="UTF-8">
    4. <head>
    5.     <title>文件上传title>
    6. head>
    7. <body>
    8. <h1>文件上传h1>
    9. <form action="upload.php" method="POST" enctype="multipart/form-data">
    10.     <input type="file" name="fileToUpload">
    11.     <input type="submit" value="上传文件">
    12. form>
    13. body>
    14. html>
    2、接受文件上传php
    2. if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    3.     $targetDir = "uploads/"; // 上传文件保存的目录
    4.     $targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]);
    5.     $uploadOk = 1; // 上传状态，1表示成功，0表示失败
    6.     $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION)); // 上传文件的扩展名
    7.     // 检查文件是否为真实的图像文件
    8.     if (isset($_POST["submit"])) {
    9.         $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    10.         if ($check !== false) {
    11.             echo "文件是一个有效的图像 - " . $check["mime"] . ".";
    12.             $uploadOk = 1;
    13.         } else {
    14.             echo "文件不是一个有效的图像.";
    15.             $uploadOk = 0;
    16.         }
    17.     }
    18.     // 检查文件是否已存在
    19.     if (file_exists($targetFile)) {
    20.         echo "对不起，文件已存在.";
    21.         $uploadOk = 0;
    22.     }
    23.     // 检查文件大小
    24.     if ($_FILES["fileToUpload"]["size"] > 500000) {
    25.         echo "对不起，文件太大.";
    26.         $uploadOk = 0;
    27.     }
    28.     // 允许上传的文件格式
    29.     $allowedExtensions = array("jpg", "jpeg", "png", "gif");
    30.     if (!in_array($imageFileType, $allowedExtensions)) {
    31.         echo "对不起，仅允许上传 JPG, JPEG, PNG 和 GIF 文件.";
    32.         $uploadOk = 0;
    33.     }
    34.     // 检查上传状态
    35.     if ($uploadOk == 0) {
    36.         echo "对不起，文件上传失败.";
    37.     } else {
    38.         if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile)) {
    39.             echo "文件上传成功.";
    40.         } else {
    41.             echo "对不起，文件上传失败.";
    42.         }
    43.     }
    44. }
    45. ?>

     

    二、表单多文件上传
    1、上传页面
    1. html>
    2. <html>
    3. <meta charset="UTF-8">
    4. <head>
    5.     <title>文件上传示例title>
    6. head>
    7. <body>
    8. <form action="upload.php" method="post" enctype="multipart/form-data">
    9.     <input type="file" name="files[]" multiple>
    10.     <input type="submit" value="上传文件">
    11. form>
    12. body>
    13. html>
    2、接受文件上传php 
    2. if ($_SERVER["REQUEST_METHOD"] == "POST") {
    3.     $files = $_FILES["files"];
    4.     // 检查是否有文件被上传
    5.     if (!empty($files)) {
    6.         // 循环处理每个上传的文件
    7.         for ($i = 0; $i < count($files["name"]); $i++) {
    8.             $file_name = $files["name"][$i];
    9.             $file_tmp = $files["tmp_name"][$i];
    10.             $file_size = $files["size"][$i];
    11.             $file_error = $files["error"][$i];
    12.             // 检查文件是否上传成功
    13.             if ($file_error == UPLOAD_ERR_OK) {
    14.                 // 指定文件保存的路径和文件名
    15.                 $target_dir = "uploads/";
    16.                 $target_file = $target_dir . basename($file_name);
    17.                 // 将文件从临时目录移动到指定路径
    18.                 if (move_uploaded_file($file_tmp, $target_file)) {
    19.                     echo "文件上传成功: " . $file_name . "
      "      ;
    20.                 } else {
    21.                     echo "文件上传失败: " . $file_name . "
      "      ;
    22.                 }
    23.             } else {
    24.                 echo "文件上传错误: " . $file_name . "
      "      ;
    25.             }
    26.         }
    27.     } else {
    28.         echo "没有选择要上传的文件";
    29.     }
    30. }
    31. ?>
    三、表单异步xhr文件上传
    1、上传页面
    1. html>
    2. <html>
    3. <meta charset="UTF-8">
    4. <head>
    5.     <title>文件上传title>
    6. head>
    7. <body>
    8. <h1>文件上传h1>
    9. <input type="file" id="fileToUpload" multiple>
    10. <button onclick="uploadFiles()">上传文件button>
    11. <div id="progress">div>
    12. <div id="response">div>
    13.  
    14. <script>
    15.     function uploadFiles() {
    16.         var input = document.getElementById('fileToUpload');
    17.         var files = input.files;
    18.         var formData = new FormData();
    19.         for (var i = 0; i < files.length; i++) {
    20.             var file = files[i];
    21.             formData.append('files[]', file);
    22.         }
    23.         var xhr = new XMLHttpRequest();
    24.         xhr.onreadystatechange = function() {
    25.             if (xhr.readyState === 4 && xhr.status === 200) {
    26.                 document.getElementById('response').innerHTML = xhr.responseText;
    27.             }
    28.         };
    29.         xhr.upload.onprogress = function(event) {
    30.             if (event.lengthComputable) {
    31.                 var progress = (event.loaded / event.total) * 100;
    32.                 document.getElementById('progress').innerHTML = '上传进度：' + progress + '%';
    33.             }
    34.         };
    35.         xhr.open('POST', 'upload.php', true);
    36.         xhr.send(formData);
    37.     }
    38. script>
    39. body>
    40. html>
    2、接受文件上传php  
    2. if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    3.     $targetDir = "uploads/"; // 上传文件保存的目录
    4.     if (!file_exists($targetDir)) {
    5.         mkdir($targetDir, 0777, true); // 如果目录不存在，则创建目录
    6.     }
    7.     $uploadOk = 1; // 上传状态，1表示成功，0表示失败
    8.     foreach ($_FILES['files']['tmp_name'] as $key => $tmp_name) {
    9.         $targetFile = $targetDir . $_FILES['files']['name'][$key];
    10.         $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION)); // 上传文件的扩展名
    11.         // 检查文件是否已存在
    12.         if (file_exists($targetFile)) {
    13.             echo "对不起，文件已存在.";
    14.             $uploadOk = 0;
    15.         }
    16.         // 允许上传的文件格式
    17.         $allowedExtensions = array("jpg", "jpeg", "png", "gif");
    18.         if (!in_array($imageFileType, $allowedExtensions)) {
    19.             echo "对不起，仅允许上传 JPG, JPEG, PNG 和 GIF 文件.";
    20.             $uploadOk = 0;
    21.         }
    22.         // 检查上传状态
    23.         if ($uploadOk == 0) {
    24.             echo "对不起，文件上传失败.";
    25.         } else {
    26.             if (move_uploaded_file($tmp_name, $targetFile)) {
    27.                 echo "文件上传成功.";
    28.             } else {
    29.                 echo "对不起，文件上传失败.";
    30.             }
    31.         }
    32.     }
    33. }
    34. ?>
    四、表单异步ajax文件上传 
    1、上传页面
    1. html>
    2. <html>
    3.     <meta charset="UTF-8">
    4. <head>
    5.     <title>文件上传示例title>
    6.     <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    7. head>
    8. <body>
    9. <form id="uploadForm" enctype="multipart/form-data">
    10.     <input type="file" name="fileToUpload" id="fileToUpload">
    11.     <button type="submit">上传button>
    12. form>
    13.  
    14. <script>
    15.     $(document).ready(function() {
    16.         $('#uploadForm').submit(function(event) {
    17.             event.preventDefault();
    18.  
    19.             var formData = new FormData(this);
    20.  
    21.             $.ajax({
    22.                 url: 'upload.php',
    23.                 type: 'POST',
    24.                 data: formData,
    25.                 dataType: 'text',
    26.                 processData: false,
    27.                 contentType: false,
    28.                 success: function(response) {
    29.                     console.log('文件上传成功');
    30.                 },
    31.                 error: function() {
    32.                     console.log('文件上传失败');
    33.                 }
    34.             });
    35.         });
    36.     });
    37. script>
    38. body>
    39. html>
    2、接受文件上传php   
    2. if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    3.     if (isset($_FILES['fileToUpload'])) {
    4.         $file = $_FILES['fileToUpload'];
    5.  
    6.         // 文件上传成功
    7.         if ($file['error'] === UPLOAD_ERR_OK) {
    8.             $fileName = $file['name'];
    9.             $tempPath = $file['tmp_name'];
    10.  
    11.             // 将文件移动到目标文件夹
    12.             move_uploaded_file($tempPath, 'uploads/' . $fileName);
    13.  
    14.             echo '文件上传成功';
    15.         } else {
    16.             echo '文件上传失败';
    17.         }
    18.     } else {
    19.         echo '未选择文件';
    20.     }
    21. }
    22. ?>

  • 相关阅读:
    突破职场难题有效沟通、应对压力、提升能力，实现职场成功
    RADIUS协议基础原理
    Nginx：尚硅谷2022版Nginx笔记
    Vue3学习笔记：ref函数、reactive函数等常用Composition API、生命周期，Fragment、teleport等新的组件用法记录
    docker入门
    Jeff Dean：机器学习在硬件设计中的潜力
    Spring核心——SPEL Bean定义中的表达式、实例应用
    LeetCode-77-组合
    jenkins+git持续集成配置
    eslint 规则
  • 原文地址：https://blog.csdn.net/weixin_39934453/article/details/133695771