Question

在表单的submit（）事件中，我尝试将serialzedData发送到我的PHP代码，以便使用AJAX上传文件（我都是新手）。如果没有AJAX直接使用，用于上传文件的PHP代码通常可以正常工作。我猜测它的AJAX部分不起作用......有什么想法吗？

表（的index.php）

<form id="upload-file" enctype="multipart/form-data">                                     
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload File" name="submit" id="upload_button">                                    
</form>

JQUERY / AJAX（index.js）

$(document).ready(function(){
    var request;
    $("#upload-file").submit(function(){

        if (request) {
            request.abort();
        }

        var $form = $(this);
        var $inputs = $form.find("input, select, button, textarea");
        var serializedData = $form.serialize();
        $inputs.prop("disabled", true);

        request = $.ajax({
            url: "fileupload.php",
            type: "post",
            data: serializedData
        });

        request.done(function (response, textStatus, jqXHR){        
            console.log("Hooray, it worked!");
        });    

        request.fail(function (jqXHR, textStatus, errorThrown){        
            console.error(
                "The following error occurred: "+
                textStatus, errorThrow
            );
        });

        request.always(function () {        
            $inputs.prop("disabled", false);
        });

        event.preventDefault();
    });
});

PHP（fileupload.php）

<?php       
    $fileToUpload = $_POST['serializedData'];   
    if ($_FILES["fileToUpload"]["error"] > 0){
        echo("Error");      
    }
    else{
        if (file_exists("upload/" . $_FILES["fileToUpload"]["name"])){                                  
            echo("File Exists");    
        }
        else{
            move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],
            "upload/" . $_FILES["fileToUpload"]["name"]);
            echo("File Uploaded");          
        }
    }
?>

目录结构是

-index.php
-js(folder)
    -index.js
-fileupload.php
-upload(folder)

Answer 1

当您尝试使用ajax上传文件时，您应该知道只有FormData()才能实现这一目标。所以你需要改变这样的事情：

request = $.ajax({
        url: "fileupload.php",
        type: "post",
        data: {serializedData : new FormData($('#upload-file')[0])}, //<----pass the form in the FormData()
        processData:false, // required
        contentType:false  // required
    });

这一行：

{serializedData : new FormData($('#upload-file')[0])}

您不必在服务器端进行太多改动。 $_POST['serializedData'];将获得发布的值。

Answer 2

然后在index.php中尝试这个新的简单代码

    <form id="upload-file" enctype="multipart/form-data">                                     
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload File" name="submit" id="upload_button"> 
</form>

<script>
$( document ).ready(function() {

        $('#upload-file').submit(function(event) {
        event.preventDefault();

 $.ajax({
        url: "fileupload.php",
        type: "post",
        dataType: "HTML",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function(response){ 
            if(response == 'File Uploaded'){ 
            // do something
            alert ('0k file uploaded');
        }
        },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }

    });
       });


                    });
    </script>

并删除

$fileToUpload = $_POST['serializedData'];

在fileupload.php中

Answer 3

为了通过ajax发送“file”对象，你需要将它创建为一个对象并发送它，在这种情况下我更喜欢使用插件。使用插件是最好的选择。你不必记住所有选项。只需将'ajax'替换为'ajaxForm'。

插件网址： http://jquery.malsup.com/form/#ajaxForm

Answer 4

试试这个删除行

var serializedData = $form.serialize();

并替换

中的数据

request = $.ajax({
        url: "fileupload.php",
        type: "post",
        data: serializedData
    });

与

data: $('#upload-file').serialize()

PHP代码不上传文件

4 个答案: