为什么我的上传临时文件夹中有两个文件？答案

【问题标题】：Why do I get two files in my upload temp folder?为什么我的上传临时文件夹中有两个文件？
【发布时间】：2021-01-20 04:00:53
【问题描述】：

我在表单中使用 PHP 来上传文件。但是我在 windows temp 中得到了两个文件（我使用 IIS）。但是当我移动文件时，我得到一个文件。

html

<form id="order-form" class="needs-validation" method="post" enctype="multipart/form-data" novalidate>
<!-- about 20 input fields --> 
                                    <div class="modal-footer">
                                        <button id="send-button" class="btn btn-primary btn-lg btn-block" type="submit">Send order</button>
                                        <div id="send-information">
                                            <small><span id="procent">0%</span> complete or <span id="loaded">0</span> of <span id="file-size">0</span></small>
                                            <div class="progress">
                                                <div id="progressNumber" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                                            </div>
                                        </div>
                                    </div>

Ajax 文件上传

    function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
    
        if (file) {
            var fileSize = 0;
            if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
            
            document.getElementById('file-size').innerHTML = fileSize;
        }
    }
    
    function uploadFile(fd) {
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        
        // stop the non-ajax form post
        fd.preventDefault();
        
        xhr.open("POST", "src/fileUpload.php");
        xhr.send(fd);
    }
    
    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            
            //var loaded = 0;
            if (evt.loaded > 1024 * 1024)
            loaded = (Math.round(evt.loaded * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
            loaded = (Math.round(evt.loaded * 100 / 1024) / 100).toString() + 'KB';
            
            document.getElementById('procent').innerHTML = percentComplete.toString() + '%';
            document.getElementById('progressNumber').style.width = percentComplete.toString() + '%';
            
            document.getElementById('loaded').innerHTML = loaded.toString();
            
        }
        else {
            document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
    }
    
    function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        window.location.replace("src/successpage.html");
    }
    
    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    }
    
    function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    }

and my PHP file upload in fileUpload.php

    <?php session_start(); /* Starts the session */
        
        //$fileName = $_FILES["fileToUpload"]["name"]; // The file name
        $fileName = $_SESSION['fileName'];
        $fileTmpLoc = $_FILES["fileToUpload"]["tmp_name"]; // File in the PHP tmp folder
        $fileType = $_FILES["fileToUpload"]["type"]; // The type of file it is
        $fileSize = $_FILES["fileToUpload"]["size"]; // File size in bytes
        $fileErrorMsg = $_FILES["fileToUpload"]["error"]; // 0 for false... and 1 for true
        
        move_uploaded_file($fileTmpLoc, "../uploads/$fileName")
    ?>

../uploads 有一个文件，但 windows temp 有两个用于上传文件的临时文件。

发送订单。 sendOrder.php 会提取文件上传所需的所有字段并通过电子邮件发送。

//Send order form
$('#order-form').submit(function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        type: 'POST',
        url: 'src/sendOrder.php',
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            console.log(response);
        },
        cache: false
    });
    uploadFile(formData);
})

【问题讨论】：

fd.preventDefault(); - fd 是您的 FormData 对象，在此调用 preventDefault 没有任何意义，此时您应该会出错。

标签： php ajax file-upload ajaxform

【解决方案1】：

您获得了两个文件，因为您确实请求了两次 src/sendOrder.php。第一次是在 ajax 请求中（帖子中的最后一个代码块），第二次是在 ajax 请求后调用函数uploadFiles(formData)。

您应该尝试从最后一个代码块中排除 $.ajax(...)。或者排除uploadFiles(formData)，但是进度条不起作用。

【讨论】：