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()功能中进行一些更改，例如：

由于您在服务器端使用$_FILES功能对json_encode()进行编码，请将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;
}

图像上传 - 未正确访问PHP文件

1 个答案: