javascript - 图片上传——未正确访问 PHP 文件

Question

我目前正在编写一个允许用户上传图片的脚本。然后该脚本将返回一个字符串，其中包含将在简单的文本编辑器中使用的文件名。

截至目前，对我的 PHP 文件 (update.php) 的 AJAX 调用似乎无法正常工作。当我检查 $_FILES 中是否有任何内容时，我发现它是空的。

我对 PHP 和 AJAX 还是比较陌生，所以我一直在广泛寻找以找出我的问题，但还没有找到任何解决问题的方法。

这是我的 HTML 代码:

<form action="javascript:;" method="post" id="customFRM" enctype="multipart/form-data">
    <input type="hidden" name="rec" id="rec" value="0" />
    <div style="background-color:#3C6893;padding:.5em 15px;width:276px;float:right;color:#fff;">Manage IS Tips</div>
    <textarea name="customPost" id="customPost" cols="60" rows="5"></textarea>
    <br />
    <div style="clear:both;">
        <div style="display:inline;">
            <input name="Link" id="add-link" type="button" value="Insert Link" class="blue-btn">
            <input name="Bold" id="add-bold" type="button" value="Bold" class="blue-btn">
            <input name="Image" id="addImg" type="file" value="Insert Image" class="blue-btn" accept="image/gif, image/jpeg">
        </div>
        <div style="padding-top: 15px">
            <input name="Submit" id="save-custom" type="button" value="Save" class="blue-btn">
        </div>
    </div>
</form>

这是我的与图片上传相关的脚本:

$("#addImg").change(function(event){
        //event.preventDefault(); // need to pick file
        //uploadImg();
        var storedFileName = uploadImg();
        $("#customPost").val($("#customPost").val() + '[img=(' + storedFileName + ')/][/img]'); //on render - /images/directory/storedFileName.ext

    });

function uploadImg() {

    //Needs to make an .ajax request to upload/php script. Script should return the file name of the processed file.

    //should check for file type

    var fileName = false;
    var formData = new FormData();

    fileName = $("#addImg")[0].files[0].name;//don't use this one
    console.log($("#addImg")[0].files[0]);

    formData.append("image", $("#addImg")[0].files[0]);
    console.log(formData);
    alert(formData);
    //*
    //upload file   
    $.ajax({
        url: "upload.php",        // Url to which the request is send
        dataType: "json",
        type: "POST",             // Type of request to be send, called as method
        data: formData,           // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data){
            //alert(data);
            //console.log(data);
            fileName = data.image.name;
            alert(fileName);
            //parsed=JSON.parse(data);

            //fileName=parsed.fileName;
            },
        error: function(data){

            console.log(data);
        }
    });
        //*/

    return fileName;
};
</script>

目前，在 upload.php 上我只有:

<?php
    //echo "test test echo";
    echo json_encode($_FILES);
?>

我寻求帮助的论坛:

jQuery AJAX file upload PHP
Access files posted through AJAX using $_FILES variable
jQuery AJAX file upload PHP
jQuery Ajax File Upload

Answer 1

您需要在 uploadImg() 函数中做一些更改，例如:

• 由于您在服务器端使用 json_encode() 函数对 $_FILES 进行编码，因此请将 dataType 设置更改为 json 。 dataType 是您期望从服务器返回的数据类型。这样您就不必在 success() 回调函数中解析响应，AJAX 会处理这件事。
• 由于您要使用 FormData 对象发送图像，因此请将 contentType 设置为 false。

• 您在 success() 回调函数中以错误的方式获取文件名，它应该是这样的:

  success: function(data){
      fileName=data.image.name;
      alert(fileName);
  }
  

所以你的uploadImg()函数应该是这样的:

function uploadImg() {
    var fileName = false;
    var formData = new FormData();

    fileName = $("#addImg")[0].files[0].name;
    formData.append("image", $("#addImg")[0].files[0]);

    $.ajax({
        url: "upload.php",          // Url to which the request is send
        dataType: "json",         // Type of data you're expecting back from server
        type: "POST",             // Type of request to be send, called as method
        data: formData,           // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data){
            fileName=data.image.name;
            alert(fileName);
        },
        error: function(data){
            console.log(data);
        }
    });
    return fileName;
}