javascript - 使用ajax和php时如何防止在服务器端多次提交上传-6ren

javascript - 使用ajax和php时如何防止在服务器端多次提交上传

转载作者：太空狗更新时间：2023-10-29 16:38:37

我正在使用此代码上传多个文件。在这里，上传和选择按钮在上传过程中被禁用，但这仅适用于客户端用户可以轻松修改代码并删除其禁用属性，所以我该怎么做在服务器端，因此用户在禁用后将无法通过单击上传按钮多次提交表单。感谢您的帮助!

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Multiple File Upload using Ajax</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div>
        <form action="action.php" method="post" enctype="multipart/form- data" id="multiple-upload-form">
            <input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById('files').click(); return false;" />
            <input type="submit" id="file-upload-btn" name="file_upload_btn" value="Upload">
            <input type="file" id="files" name="files[]" multiple="" style="visibility: hidden;">
            <br><br>
            <div class="file-bar">
                <span class="file-bar-fill" id="file-bar-fill-id"><span class="file-bar-fill-text" id="file-bar-fill-text-id"></span></span>
            </div>
            <script type="text/javascript">
                var app = app || {};

                (function(o){
                    "use strict";

                    var ajax, getFormData, setProgress;

                   ajax = function(data){
                        var xmlhttp = new XMLHttpRequest(), uploaded;

                        xmlhttp.addEventListener('readystatechange', function(){
                            if(this.readyState==4){
                                if(this.status==200){
                                    uploaded = JSON.parse(this.response);

                                    if(typeof o.options.finished==='function'){
                                       o.options.finished(uploaded);
                                    }

                               }    else {
                                    if(typeof o.options.error === 'function'){
                                    o.options.error();
                                    }
                                }
                            }
                        });

                       xmlhttp.upload.addEventListener("progress", function(event){
                            var percent;
                            if(event.lengthComputable===true){
                                percent = Math.round((event.loaded / event.total) * 100);
                                setProgress(percent);
                           }

                        });

                        if(o.options.progressBar!==undefined){
                            o.options.progressBar.style.width=0;
                        }
                        if(o.options.progressText!==undefined){
                           o.options.progressText.innerText=0;
                       }

                         xmlhttp.open("post", o.options.processor);
                         xmlhttp.send(data);
                    };

                    getFormData = function(source){
                        var data = new FormData(), i;

                        if(source.length<=0)
                        {
                            return false;
                        }
                        else
                         {
                             for(i=0;i<source.length; i++){
                                data.append('files[]', source[i]);
                             }

                            return data;
                         }
                     };

                    setProgress = function(value){
                         if(o.options.progressBar!==undefined){
                            o.options.progressBar.style.width = value? value+"%":0;
                         }
                        if(o.options.progressText!==undefined){
                            o.options.progressText.innerText=value?value+"%":0;
                         }
                     };

                     o.uploader = function(options){
                          o.options = options;

                         if(o.options.files !== undefined){
                             var imageFormDataValue = getFormData(o.options.files.files);
                             if(imageFormDataValue===false)
                             {
                                 alert("No Files Selected");
                                 document.getElementById("file-upload-btn").disabled = false;
                                 document.getElementById("select-file-btn").disabled = false;
                             }
                             else
                            {
                                ajax(imageFormDataValue);
                            }
                        }
                    };

                 }(app));

                 document.getElementById("file-upload-btn").addEventListener("click", function(e){
                    e.preventDefault();

                    document.getElementById("file-upload-btn").setAttribute("disabled", "true");
                    document.getElementById("select-file-btn").setAttribute("disabled", "true");

                     var f = document.getElementById('files'),
                         pb = document.getElementById('file-bar-fill-id'),
                         pt = document.getElementById('file-bar-fill-text-id');

                    app.uploader({
                         files: f,
                         progressBar: pb,
                         progressText: pt,
                         processor: "action.php",

                        finished: function(data){
                            document.getElementById("file-upload-btn").disabled = false;
                            document.getElementById("select-file-btn").disabled = false;

                            if(data.status===true){
                                alert(data.data);
                            }

                        },

                         error: function(){
                            alert("Error occured. Try Again after page reload.");
                        }
                    });
                });
             </script>
         </form>
     </div>
</body>
</html>

action.php

 <?php

 set_time_limit(0);

 if(count($_FILES["files"])>0)
{
    $success = 0;
    $failed = 0;


     foreach ($_FILES["files"]["error"] as $key => $value)
    {
        if(empty($value))
        {
             if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], __DIR__."/uploads/".uniqid()."_".$_FILES["files"]["name"][$key]))
          {
               $success++;
           }
           else
           {
            $failed++;
           }
       }
        else
        {
            $failed++;
         }
    }

    $data = "";

    if($success>0)
        $data .= $success." files uploaded. ";

    if($failed>0)
        $data .= $failed." files failed to upload";

     $response = array("status" => true, "data" => $data );

     echo json_encode($response);
 }

 ?>

最佳答案

正如我在评论中所说的那样——只要用户对 html 具有完全访问权限，就无法真正解决在服务器端停止冗余上传的问题。您唯一可以做的就是监控每天上传的 MB 总量，并将进行此类非法事件的用户 ip/帐户列入黑名单。例如:

session_start();

$_SESSION['total_uploaded'] += (int)(filesize(($_FILES['fileToUpload']['tmp_name']))/(1024*1024));

if ($_SESSION['total_uploaded'] > 1024) {
    echo "<p style='background-color: palevioletred; max-width:280px;'>
         You uploaded too much data : {$_SESSION['total_uploaded']} MB<br>
         So your IP/account will be blacklisted !</p>";
}

$html = <<< STR
<table border="1">
<tr>
<td>
<form id="uploadForm" action="" method="post"  enctype= "multipart/form-data">
    <br>
    &emsp;<input type="file" name="fileToUpload" value=""><br><br>
    &emsp;<input type="submit" name="submit_file" value="Upload">
</form>
</td>
</tr>
</table>

STR;

echo $html;