0

私の目標は、いくつかの画像をサーバーにアップロードし、説明を提供することです。

アップロードボタンをクリックすると、これが私がしたいことです：

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コードupload.php

<?php

session_start();

if (!isset($_POST['description'])) {
    echo "upload:fail\n";
    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:fail\n";
        }
    else {
        echo "upload:succes\n";
    }
    exit();
}

exit();
?>
4

1 に答える 1

0

同じことをより適切にプログラミングした開発者が多数いる場合は、独自の非同期ファイル アップロード機能を作成しないことを強くお勧めします。次のオプションを確認してください。

私はこれらの2つを以前に使用しましたが、非常にうまく機能します。BlueImp の場合、このオプションを使用して追加のフォーム データを送信できます。

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

上記はフォームをキャプチャし、その入力をシリアル化します。または、特定の値を使用して (つまり、DOM 内の特定の要素から) 配列またはオブジェクトを設定することもできます。

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

ID を使用して、ファイルと説明をリンクします。

于 2013-02-16T11:04:44.593 に答える