發佈數據服務器端並在提交表單時執行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代碼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(); 
?> 

Answer 1

我真的建議不要創建自己的異步文件上傳功能時，有過多那些已經編好了同樣東西的開發者。看看這些選項：

• Blueimp's jQuery file uploader
• Uploadifive（Uploadify的HTML5實現）

我用這兩個前，他們工作得很好。對於BlueImp，您可以使用此選項發送其他表單數據：

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

上面的表格捕獲表單並序列化其輸入。或者，您可以填充數組或使用特定值對象（即從DOM中的特定元素）：

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

你會使用ID來鏈接您的文件和說明。