如何使用JavaScript和PHP上传视频？及部分GIF与所有视频上传后服务器端文件大小为0的问题咨询

Let's break down why you're seeing 0-byte files on the server for larger GIFs and videos—this is almost always related to size limits or missing error checking. Here's what to investigate step by step:

Your test video is 28MB, which is way larger than PHP's default upload limits. If your server's upload_max_filesize or post_max_size is set to a lower value (like 2MB), PHP will silently truncate the upload to 0 bytes.

To fix this:

• Locate your php.ini file (run phpinfo() in a test script to find its path)
• Update these values to exceed your largest file size (e.g., 50MB or more):

  upload_max_filesize = 50M
  post_max_size = 60M
  memory_limit = 128M
  

• Restart your web server (Apache/Nginx) for changes to take effect.

Even if PHP allows the upload, your web server might block large requests:

• Apache: Check the LimitRequestBody directive in .htaccess or your Apache config. Set it to a value larger than your file size (e.g., LimitRequestBody 52428800 for 50MB).
• Nginx: Look for client_max_body_size in your Nginx config. Set it to 50m or higher.

Your current code doesn't check for upload errors, which would tell you exactly what's going wrong. Modify your PHP code to include this critical check:

if(isset($_FILES["uploaded_file"]["name"]) && $_FILES["uploaded_file"]["name"] != ''){
    // Check for upload errors first
    if ($_FILES["uploaded_file"]["error"] !== UPLOAD_ERR_OK) {
        $errorMessages = [
            UPLOAD_ERR_INI_SIZE => "File exceeds upload_max_filesize limit",
            UPLOAD_ERR_FORM_SIZE => "File exceeds form max size limit",
            UPLOAD_ERR_PARTIAL => "File was only partially uploaded",
            UPLOAD_ERR_NO_FILE => "No file was uploaded",
            UPLOAD_ERR_NO_TMP_DIR => "Missing temporary folder",
            UPLOAD_ERR_CANT_WRITE => "Failed to write file to disk",
            UPLOAD_ERR_EXTENSION => "File upload stopped by extension"
        ];
        $error = $errorMessages[$_FILES["uploaded_file"]["error"]] ?? "Unknown upload error";
        print json_encode(['message' => $error, 'code' => 0]);
        exit();
    }

    $filepath = $_FILES['uploaded_file']['name'];
    $fileSize = $_FILES['uploaded_file']['size'];
    print json_encode(array('message' => "File received successfully", 'img_details' => $filepath . ' ' . $fileSize, 'code' => 1));
    exit();
}

This will return a clear error message if the upload fails due to size limits or other issues.

In your client-side code, you're using FileReader.readAsDataURL(f) but not using the result. While this shouldn't break the upload, it's unnecessary (unless you're displaying a preview) and can be removed to eliminate potential edge cases:

$(document).on('change', '#input-filename', function (e){
    var form_data = new FormData();
    var f = document.getElementById('input-filename').files[0];
    console.log(f);
    form_data.append("uploaded_file", f);
    
    $.ajax({
        url: 'handle_file.php',
        method:"POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData: false,
        beforeSend:function(){
            // ...
        },
        success:function(data) {
            console.log(data);
        }
    });
});

To confirm you're appending the correct file, log the FormData entries in your browser console:

for (let [key, value] of form_data.entries()) {
    console.log(key, value);
}

This should show the uploaded_file entry with the correct file details (name, size, type).

Start with adjusting the PHP and server limits first—this is almost certainly the issue with your 28MB video. Adding error handling will help you confirm the root cause quickly.

内容的提问来源于stack exchange，提问作者Kyv