javascript - 在同一个 Ajax 调用中发送 $_POST[] 和 $_FILES[]

Question

我正在我的网站上进行图像上传帖子部分，但我正在努力上传带有日期的图像。我通过 $_POST 发送日期，并在 $_FILES 中发送图像文件。

这是我的代码(Javascript):

(function post_image_content() {
var input = document.getElementById("images"), 
    formdata = false;

function showUploadedItem (source) {
    var list = document.getElementById("image-list"),
        li   = document.createElement("li"),
        img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
    list.appendChild(li);
}   

if (window.FormData) {
    formdata = new FormData();
    document.getElementById("btn").style.display = "none";
}


input.addEventListener("change", function (evt) {
    var data = '';
    date = document.getElementById('image_date').value;
    if(date == ''){
        alert('Please select a date!');
        return 0;
    } else {
        data = 'date='+date;
    }

    document.getElementById("response").innerHTML = "Uploading . . ."
    var i = 0, len = this.files.length, img, reader, file;

    for ( ; i < len; i++ ) {
        file = this.files[i];

        if (!!file.type.match(/image.*/)) {
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) { 
                    showUploadedItem(e.target.result, file.fileName);
                };
                reader.readAsDataURL(file);
            }
            if (formdata) {
                formdata.append("images[]", file);
            }
        }   
    }

    if (formdata) {
        $.ajax({
            url: "submit_image.php",
            type: "POST",
            data: formdata + ' ' + data,
            processData: false,
            contentType: false,
            success: function (res) {
                $('#images').show();
                document.getElementById("response").innerHTML = res;
                hideImageUpload(); 
            }
        });
    }
}, false);
}());

function hideImageUpload(){
$('#image_upload_form').hide(250);
//$('#response').hide(250);
$('#image-list').hide(250);
}

还有 PHP:

<?php
require_once 'core/init.php';
$user = new User();
$errors = $_FILES["images"]["error"];
$date = $_POST['date'];

$date = explode("/", $date);
$newdate = $date[2] + '-' + $date[0] + '-' + $date[1];

foreach ($errors as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    //$ext = pathinfo($name, PATHINFO_EXTENSION);
    $name = explode("_", $name);
    $imagename='';
    foreach($name as $letter){
        $imagename .= $letter;
    }

    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "images/uploads/" . $user->data()->id . '_' . $imagename);

    $user->create('photos', array(
        'osid' => $user->data()->id,
        'user' => $user->data()->username,
        'gallery' => 'Uploads',
        'filename' => "images/uploads/" . $user->data()->id . '_' . $imagename,
        'date' => $newdate
    ));
}
}


echo "<h2>Successfully Uploaded Images</h2>";

我是Web开发新手，我正在使用PDO进入数据库。

Answer 1

等等... data: formdata + ' ' + data, 这有点令人困惑。您添加包含 url 编码数据的 FormData 对象和字符串。

将日期值附加到 formdata 对象:formdata.append('date', date)。之后，仅使用 data: formdata, 发送 AJAX 查询。

但可能还有更多错误。

要进行调试，请使用Chrome 开发者工具。您可以使用 debugger 和 console.log(something) 来设置断点并打印变量。此外，您始终可以使用逐步调试。