使用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