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

目录

一、表单单文件上传

1、上传页面

2、接受文件上传php

二、表单多文件上传

1、上传页面

2、接受文件上传php

三、表单异步xhr文件上传

1、上传页面

2、接受文件上传php

四、表单异步ajax文件上传

1、上传页面

2、接受文件上传php

---

一、表单单文件上传

1、上传页面

    


文件上传

    
    

2、接受文件上传php

 500000) {
        echo "对不起，文件太大.";
        $uploadOk = 0;
    }
    // 允许上传的文件格式
    $allowedExtensions = array("jpg", "jpeg", "png", "gif");
    if (!in_array($imageFileType, $allowedExtensions)) {
        echo "对不起，仅允许上传 JPG, JPEG, PNG 和 GIF 文件.";
        $uploadOk = 0;
    }
    // 检查上传状态
    if ($uploadOk == 0) {
        echo "对不起，文件上传失败.";
    } else {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile)) {
            echo "文件上传成功.";
        } else {
            echo "对不起，文件上传失败.";
  服务器托管网      }
    }
}
?>

二、表单多文件上传

1、上传页面

2、接受文件上传php

<?php if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $files = $_FILES["files"];
    // 检查是否有文件被上传
    if (!empty($files)) {
        // 循环处理每个上传的文件
        for ($i = 0; $i < count($files["name"]); $i++) {
            $file_name = $files["name"][$i];
            $file_tmp = $files["tmp_name"][$i];
            $file_size = $files["size"][$i];
            $file_error = $files["error"][$i];
            // 检查文件是否上传成功
            if ($file_error == UPLOAD_ERR_OK) {
                // 指定文件保存的路径和文件名
                $target_dir = "uploads/";
                $target_file = $target_dir . basename($file_name);
                // 将文件从临时目录移动到指定路径
                if (move_uploaded_file($file_tmp, $target_file)) {
                    echo "文件上传成功: " . $file_name . "
";
                } else {
                    echo "文件上传失败: " . $file_name . "
";
                }
            } else {
                echo "文件上传错误: " . $file_name . "
";
            }
        }
    } else {
        echo "没有选择要上传的文件";
    }
}
?>

三、表单异步xhr文件上传

1、上传页面

    


文件上传

上传文件




    function uploadFiles() {
        var input = document.getElementById('fileToUpload');
        var files = input.files;
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            formData.append('files[]', file);
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById('response').innerHTML = xhr.responseText;
            }
        };
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                var progress = (event.loaded / event.total) * 100;
                document.getElementById('progress').innerHTML = '上传进度：' + progress + '%';
            }
        };
        xhr.open('POST', 'upload.php', true);
        xhr.send(formData);
    }

2、接受文件上传php

 $tmp_name) {
        $targetFile = $targetDir . $_FILES['files']['name'][$key];
        $imageFileType = strtolower(pathi服务器托管网nfo($targetFile, PATHINFO_EXTENSION)); // 上传文件的扩展名
        // 检查文件是否已存在
        if (file_exists($targetFile)) {
            echo "对不起，文件已存在.";
            $uploadOk = 0;
        }
        // 允许上传的文件格式
        $allowedExtensions = array("jpg", "jpeg", "png", "gif");
        if (!in_array($imageFileType, $allowedExtensions)) {
            echo "对不起，仅允许上传 JPG, JPEG, PNG 和 GIF 文件.";
            $uploadOk = 0;
        }
        // 检查上传状态
        if ($uploadOk == 0) {
            echo "对不起，文件上传失败.";
        } else {
            if (move_uploaded_file($tmp_name, $targetFile)) {
                echo "文件上传成功.";
            } else {
                echo "对不起，文件上传失败.";
            }
        }
    }
}
?>

四、表单异步ajax文件上传

1、上传页面

    

    
    



    
    上传



    $(document).ready(function() {
        $('#uploadForm').submit(function(event) {
            event.preventDefault();

            var formData = new FormData(this);

            $.ajax({
                url: 'upload.php',
                type: 'POST',
                data: formData,
                dataType: 'text',
                processData: false,
                contentType: false,
                success: function(response) {
                    console.log('文件上传成功');
                },
                error: function() {
                    console.log('文件上传失败');
                }
            });
        });
    });

2、接受文件上传php

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 从入门到精通：掌握 FastAPI APIRouter 的全面指南

FastAPI 是一个现代的、高性能的 Python Web 框架，它提供了 APIRouter 来帮助组织和管理路由。APIRouter 是一个可用于组织和分组路由的类，使得代码结构更加清晰和可维护。本文将介绍 FastAPI APIRouter 的用法，包…