发布数据服务器端并在提交表单时执行javascript代码

Question

我的目标是将一些图像上传到服务器，并为它们提供描述。

点击上传按钮，这就是我想要的：

1） javascript函数动态添加表单以获取描述的图像。

2） 关于提交表格：

 a) the description entered in the form must be available $_POST['description'] at server side.
 b) the images are sent to the server using an XMLHttpRequest

在我写的代码中，描述是不可用的$_POST['description']。当我删除复选框if(!isset($_POST['description']))时，图像文件就完美地上传了。这是我的代码：

javascript代码

upload.onclick = uploadPrompt;
// dynamically add a form
function uploadPrompt () {
    // fileQueue is an array containing all images that need to be uploaded
    if (fileQueue.length < 1) {
        alert("There are no images available for uploading.");
    } else {
        var inputDescription = document.createElement("input");
        inputDescription.className = "promptInput";
        inputDescription.type = "text";
        inputDescription.name = "description";
        var inputButton = document.createElement("button");
        inputButton.id = "promptInputButton";
        inputButton.type = "submit";
        inputButton.innerHTML = "Start uploading";
        var promptForm = document.createElement("form");
        promptForm.method = "post";
        promptForm.action = "upload.php";
        promptForm.onsubmit = uploadQueue;
        promptForm.id = "promptForm";
        promptForm.appendChild(inputDescription);
        promptForm.appendChild(inputButton);
        document.body.appendChild(promptForm);
    }
}
function uploadQueue(ev) {
    ev.preventDefault();
    elementToBeRemoved = document.getElementById("promptForm");
    elementToBeRemoved.parentElement.removeChild(elementToBeRemoved);
    while (fileQueue.length > 0) {
        var item = fileQueue.pop();
        // item.file is the actual image data
        uploadFile(item.file);
    }
}
function uploadFile (file) {
    if (file) {
        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        fd.append('image',file);
        xhr.upload.addEventListener("error", function (ev) {
            console.log(ev);
        }, false);
        xhr.open("POST", "upload.php");
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.send(fd);
    }
}

php代码上传.php

<?php
session_start();
if (!isset($_POST['description'])) {
    echo "upload:failn";
    echo "message:No scene was specified";
    exit();
}

if (isset($_FILES['image'])) {
    if(!move_uploaded_file($_FILES['image']['tmp_name'], "uploads/" . $_POST['description'] . "/" . $_FILES['image']['name'])) {
        echo "upload:failn";
        }
    else {
        echo "upload:succesn";
    }
    exit();
}
exit();
?>

Answer 1

我真的建议不要创建自己的异步文件上传功能，因为有太多的开发人员已经对同样的东西进行了更好的编程。查看这些选项：

• Blueimp的jQuery文件上传器
• Uploadify（Uploadify的HTML5实现）

我以前用过这两种，效果很好。对于BlueImp，您可以使用此选项发送额外的表单数据：

$('#fileupload').fileupload({
   formData: $('.some_form').serialize()
});

上面捕获了一个表单并序列化了它的输入。或者，您可以使用特定的值（即来自DOM中的特定元素）填充数组或对象：

var array = new Array();
$('.description').each(function() {
   array[this.id] = this.value;
});

你可以使用ID来链接你的文件和描述。