PHP的AJAX图像上传错误

Question

为什么会出现此错误？我错过了代码片段吗？如果是这样，请给出简单的解释。我是ajax和jQuery的初学者。我已经搜索了Google。但他们中的许多都是关于图片上传的技术，我不明白。帮我。感谢。

$(document).ready( function(e) {

            $(".frmUpload").on('submit',(function(e) {
                    e.preventDefault();
                    $(".upload-msg").text('Loading...');
                    $.ajax({
                        url: "processor2.php",
                        type: "POST",

                        success: function(data){ //function to be called if request succeeds
                            $(".upload-msg").html(data);
                        }
                    });
            }));
    });

            <h1>Ajax Image Upload</h1>
        <form action="" method="post" class="frmUpload">
            <input type="file" name="photoUpload" id="ajaxUpload">
            <input type="submit" value="UPLOAD">
        </form>
        <div class="img-preview"></div>
        <div class="upload-msg"></div>

PHP脚本如下所示;

<?php   
        // photoUpload was given to name attribute of the upload field in the form
        if( is_uploaded_file($_FILES['photoUpload']['tmp_name']) && $_FILES['photoUpload']['error']==0 ) {
            echo "The file was uploaded successfully to the temporary location, but has not been saved<br>";
            echo "<br>The file is temporary stored: ". $_FILES['photoUpload']['tmp_name'];
            echo "<br>The file name was: ". $_FILES['photoUpload']['name'];
            echo "<br>The file type is: ". $_FILES['photoUpload']['type'];
            echo "<br>The file size (bytes) is: ". $_FILES['photoUpload']['size'];

            //check file size
            if ( $_FILES['photoUpload']['size'] > 5242880 ) 
                die ("<hr>Sorry, this file is larger than 5 MB");

            echo "<hr>";
            $allowedExts = array( "gif", "jpeg", "jpg", "png" );
            $exp_array = explode(".", strtolower($_FILES['photoUpload']['name']));
            $extension = end($exp_array);

            $allowedType = array( "image/gif", "image/jpeg", "image/jpg", "image/png" );

            if( !in_array($_FILES['photoUpload']['type'], $allowedType) )
                die ("<br>Unsupported file type!");

            if( !in_array($extension, $allowedExts) )
                die ("<br>Unsupported file extension!");

            // file_exists() - determine file has already been uploaded
            $path = "C:/xampp/htdocs/PHP/". $_FILES['photoUpload']['name'];

            if(!file_exists($path)){
                echo "<hr>File does not exist. It is safe to move the temporary file<br>";
                if( move_uploaded_file($_FILES['photoUpload']['tmp_name'], $path) ){
                    echo "The file was uploaded successfully.";
                }
                else{
                    echo "File upload failed!";
                }
            }
            else{
                echo "<br>File already exist. Please upload another file";
            }

        }
        else{
            echo "Please select the file to upload<br>";
            echo "Error code: ". $_FILES['photoUpload']['error'];
        }
    ?>

Answer 1

由于JavaScript的安全限制，使用某些XMLHttpRequest（Ajax）进行异步文件上传在技术上是不可能的。大多数JavaScript示例和教程都调用此方法仍然使用Ajax上传，并使用“虚拟IFRAME”上传图像或文件。您可以使用某些第三方插件来实现ajax文件上载功能。

Answer 2

你必须使用＆＃34; formData＆＃34;用ajax上传图片。

尝试以下代码。并检查PHP脚本中的$_FILES['photoUpload']['tmp_name']和$_FILES['photoUpload']['name']变量。

$(".frmUpload").on('submit',(function(e) {
                    e.preventDefault();
                    var formData = new FormData(this);
                    $.ajax({
                        url: "processor2.php",
                        type: "POST",
                        data: formData,
                        async : true,
                        contentType: false,       // The content type used when sending data to the server.
                        cache: false,             // To unable request pages to be cached
                        processData:false, 
                        success: function(data){ //function to be called if request succeeds
                            $(".upload-msg").html(data);
                        }
                    });
            }));