使用AJAX和PHP上傳文件

Question

我正在嘗試將文件上傳到我的服務器。

真正困擾我的是，雖然文件沒有上傳，但成功調用仍在執行。

HTML

<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm"> 
    <label>Castellà</label><input name="mapa_es" id="mapa_es" type="file" /> 
     <div id="progressbox_es" style="display:none;"> 
      <div id="progressbar_es"> 
        <div id="statustxt_es">0% 
        </div> 
      </div> 
     </div> 
</form> 

JS

$(document).ready(function() { 
       $('#mapa_es').change(function() { 
        var formData = (this.files[0]); 
        $.ajax({ 
         xhr: function() 
         { 
          var xhr = new window.XMLHttpRequest(); 
          xhr.upload.addEventListener("progress", function(evt) { 
           if (evt.lengthComputable) { 
            var percentComplete = Math.floor((evt.loaded/evt.total) * 100); 
            console.log(percentComplete + '%'); 
            //Progress bar 
            $('#progressbox_es').show(); 
            $('#progressbar_es').width(percentComplete + '%') 
            $('#progressbar_es').css('background-color', '#6699FF'); 
            $('#statustxt_es').html(percentComplete + '%'); 
            if (percentComplete > 50) 
            { 
             $('#statustxt_es').css('color', '#000'); 
            } 
           } 
          }, false); 
          xhr.addEventListener("progress", function(evt) { 
           if (evt.lengthComputable) { 
            var percentComplete = Math.floor((evt.loaded/evt.total) * 100); 
            //Progress bar 
            $('#progressbox_es').show(); 
            $('#progressbar_es').width(percentComplete + '%'); 
            $('#progressbar_es').css('background-color', '#6699FF'); 
            $('#statustxt_es').html(percentComplete + '%'); 
            if (percentComplete > 50) 
            { 
             $('#statustxt_es').css('color', '#000'); 
            } 
            console.log(percentComplete + '%'); 
           } 
          }, false); 
          return xhr; 
         }, 
         url: 'processupload.php', 
         type: 'POST', 
         data: formData, 
         async: true, 
         beforeSend: function() { 
         }, 
         success: function(msg) { 
          console.log(msg); 
         }, 
         cache: false, 
         contentType: false, 
         processData: false 
        }); 
        return false; 
       }); 
      }); 

和processupload.php

<?php 
if (isset($_FILES["mapa_es"]) && $_FILES["mapa_es"]["error"] == UPLOAD_ERR_OK) { 
    $UploadDirectory = 'mapes/'; 

    if ($_FILES["mapa_es"]["size"] > 5242880) { 
     echo "File size is too big!"; 
    } 


    $File_Name = strtolower($_FILES['mapa_es']['name']); 
    $File_Ext = substr($File_Name, strrpos($File_Name, '.')); 
    $Random_Number = rand(0, 9999999999); 
    $NewFileName = $Random_Number . $File_Ext; 

    if (move_uploaded_file($_FILES['mapa_es']['tmp_name'], $UploadDirectory . $NewFileName)) { 
     echo 'Success! File Uploaded.'; 
    } else { 
     echo 'error uploading File!'; 
    } 
} else { 
    echo 'Something wrong with upload!'; 
} 
?> 

我會感謝任何幫助，您可以給我的PHP代碼。謝謝。

編輯：我跟着gtryonp的建議，我進入更多的問題。 當我嘗試var_dump（$ _ FILES）時，我得到的只是一個空字符串。

我也嘗試使用$（）。submit提交表單而不是$（）。change並且它工作，我認爲這可能是因爲表單標記上的「enctype =」multipart/form-data「。 有沒有辦法實現它，而無需提交整個表單？

Answer 1

您的processupload.php以死亡（消息）結束，將作爲一個正常的程序結束，所以成功事件將被觸發並且在執行console.log（「上傳的文件」）將是你的反應總是，​​即使是在錯誤的情況下更改所有模具（消息）與回聲消息，像：

if (move_uploaded_file($_FILES['mapa_es']['tmp_name'], $UploadDirectory . $NewFileName)) { 
echo 'Success! File Uploaded to '.$UploadDirectory . $NewFileName; 
} else { 
echo 'error uploading File!'; 
} 
... 

並改變成功功能，以迴應屏幕可能的答案。喜歡的東西：

success: function(msg) { 
console.log(msg); 
}, 

HAGD