拖拽上传功能无法上传200KB以上文件的问题求助

AI 小北

2026-8-13

问题描述

通过Ajax实现拖拽上传功能，可将文件上传至MySQL数据库及服务器指定uploads文件夹，小文件（<200KB）上传正常，但200KB及以上文件无法上传。已确认.htaccess及PHP的upload_max_filesize、post_max_size、memory_limit参数均设置远大于200KB（默认2MB）。相关代码如下：

注：忽略mysql_query写法，网站版本较老

uploadr.php 代码

<?php
include '../db.php';
include '../functions.php';
error_reporting(E_ALL & ~E_NOTICE);

session_start();
$link=mysql_connect($hostname,$dbusername,$dbpassword);
mysql_select_db($_SESSION["databasename"]);
$authenticated=false;
$authenticated=authenticateuser($link,$_SESSION["username"],$_SESSION["password"]);
if($authenticated>0 AND $authenticated<=2){
}else{
  header("location: ../noaccess.php");
  exit;
}

ini_set("log_errors", 1);
ini_set("error_log", __DIR__ . "/log/php-error.log");

if(isset($_FILES['images'])) {
    for($count = 0; $count < count($_FILES['images']['name']); $count++) {
        move_uploaded_file($_FILES['images']['tmp_name'][$count], '/web/websitename/html/chase/uploads/'.$_SESSION["databasename"].'/sys/' . $_FILES['images']['name'][$count]);
        $q='INSERT INTO uploads SET
              filename="'.$_FILES['images']['name'][$count].'",
              filesize="'.$_FILES['images']['size'][$count].'",
              depoid="1",
              uploadtime="'.time().'"';
              
        mysql_query($q);
    }
    echo 'success';
}
?>

拖拽功能JavaScript代码

_('drag_drop').ondrop = function(event) {
    event.preventDefault();
    var form_data  = new FormData();
    var image_number = 1;
    var error = '';
    var drop_files = event.dataTransfer.files;
    for(var count = 0; count < drop_files.length; count++) {
        extension = drop_files[count].name.split('.').pop();
        if(extension=='csv' || extension=='jpg' || extension=='jpeg' || extension=='gif' || extension=='mp3' || extension=='mp4' || extension=='m4a' ||
                extension=='wma' || extension=='wmv' || extension=='pm' || extension=='png' || extension=='bmp' || extension=='tif' || extension=='pdf' || 
                extension=='txt' || extension=='doc' || extension=='dix' || extension=='docx' || extension=='dot' || extension=='msg' || extension=='rtf' || 
                extension=='pst' || extension=='pfx' || extension=='ptx' || extension=='ptf' || extension=='ptz' || extension=='eml' || extension=='ecl' || 
                extension=='mdi' || extension=='wav' || extension=='wpd' || extension=='dm' || extension=='sgnl' || extension=='trn' || extension=='xls' || 
                extension=='xlsx' || extension=='ytg' || extension=='zip' || extension=='bkc' || extension=='lef' || extension=='sgpgl' || extension=='sgngl' || 
                extension=='xmef' || extension=='not' || extension=='pages' || extension=='numbers' || extension=='key' || extension=='prproj' || extension=='pk' || 
                extension=='pek' || extension=='cfa' || extension=='pkf' || extension=='dts' || extension=='mxf' || extension=='lrt' || extension=='aml' || 
                extension=='dvt' || extension=='cms' || extension=='oll' || extension=='mdb' || extension=='sbf' || extension=='vid' || extension=='exh' || 
                extension=='pts' || extension=='dil' || extension=='mpg' || extension=='prn' || extension=='pptx' || extension=='vcf' || extension=='ics' || 
                extension=='mov' || extension=='avi' || extension=='scc' || extension=='srt'){
            form_data.append("images[]", drop_files[count]);
        } else {
            error += '<div class="alert alert-danger"><b>'+image_number+'</b> Selected File must be .jpg or .png Only.</div>';
        }
        image_number++;
    }
    if(error != '') {
        _('uploaded_image').innerHTML = error;
        _('drag_drop').style.borderColor = '#ccc';
        document.location='searchz.php?uploaded=2';
    } else {
        _('progress_bar').style.display = 'block';
        var ajax_request = new XMLHttpRequest();
        ajax_request.open("POST", "uploadr.php",true);
        ajax_request.upload.addEventListener('progress', function(event){
            var percent_completed = Math.round((event.loaded / event.total) * 100);
            _('progress_bar_process').style.width = percent_completed + '%';
            _('progress_bar_process').innerHTML = percent_completed + '% completed';
        });
        ajax_request.addEventListener('load', function(event){
            _('uploaded_image').innerHTML = '<div class="alert alert-success">Files Uploaded Successfully</div>';
            _('drag_drop').style.borderColor = '#ccc';
        });
        document.location='searchz.php?uploaded=1';
        ajax_request.send(form_data);
    }
}

注：当前未校验上传是否成功，仅校验文件扩展名，首次使用Ajax，尚未掌握如何接收响应，优先解决上传问题

解决方案

1. 修复JavaScript页面跳转顺序问题

你在发送Ajax请求之前执行了document.location='searchz.php?uploaded=1'，这会直接跳转页面中断请求。小文件体积小可能在跳转前完成上传，但大文件还未发送就被终止。

修改JavaScript代码，将跳转移至Ajax的load事件回调中：

// 移除原有的document.location行
ajax_request.addEventListener('load', function(event){
    _('uploaded_image').innerHTML = '<div class="alert alert-success">Files Uploaded Successfully</div>';
    _('drag_drop').style.borderColor = '#ccc';
    // 上传完成后再跳转
    document.location='searchz.php?uploaded=1';
});
// 删除此行：document.location='searchz.php?uploaded=1';
ajax_request.send(form_data);

2. 增加错误处理排查问题

在PHP和JS中添加错误处理，定位上传失败原因：

PHP端：检查文件移动和数据库插入操作结果，输出错误信息
修改uploadr.php循环部分：

if(isset($_FILES['images'])) {
    $success = true;
    for($count = 0; $count < count($_FILES['images']['name']); $count++) {
        $targetPath = '/web/websitename/html/chase/uploads/'.$_SESSION["databasename"].'/sys/' . $_FILES['images']['name'][$count];
        // 检查目标目录是否存在，不存在则创建
        $dir = dirname($targetPath);
        if(!is_dir($dir)){
            mkdir($dir, 0755, true);
        }
        if(!move_uploaded_file($_FILES['images']['tmp_name'][$count], $targetPath)){
            $success = false;
            echo 'Error moving file: '.$_FILES['images']['name'][$count];
            break;
        }
        $q='INSERT INTO uploads SET
              filename="'.$_FILES['images']['name'][$count].'",
              filesize="'.$_FILES['images']['size'][$count].'",
              depoid="1",
              uploadtime="'.time().'"';
        
        if(!mysql_query($q)){
            $success = false;
            echo 'Error inserting into DB: '.mysql_error($link);
            break;
        }
    }
    if($success){
        echo 'success';
    }
}

JS端：添加异常监听捕获请求错误

ajax_request.addEventListener('error', function(event){
    _('uploaded_image').innerHTML = '<div class="alert alert-danger">Upload failed due to network or server error</div>';
    _('drag_drop').style.borderColor = '#ccc';
});
ajax_request.addEventListener('abort', function(event){
    _('uploaded_image').innerHTML = '<div class="alert alert-danger">Upload was aborted</div>';
    _('drag_drop').style.borderColor = '#ccc';
});

3. 验证PHP配置是否生效

在uploadr.php顶部添加代码，确认实际生效的参数：

echo 'upload_max_filesize: '.ini_get('upload_max_filesize').'<br>';
echo 'post_max_size: '.ini_get('post_max_size').'<br>';
echo 'memory_limit: '.ini_get('memory_limit').'<br>';

访问页面查看输出后删除该代码，避免暴露敏感信息。

4. 检查服务器目录权限

确认/web/websitename/html/chase/uploads/及其子目录权限，确保PHP进程有写入权限（一般设置为755，所有者为web服务器用户）。

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

拖拽上传功能无法上传200KB以上文件的问题求助

uploadr.php 代码 #

拖拽功能JavaScript代码 #

1. 修复JavaScript页面跳转顺序问题 #

2. 增加错误处理排查问题 #

3. 验证PHP配置是否生效 #