[英]POSTing data serverside AND execute javascript code on submitting a form
我的目標是將一些圖像上傳到服務器並提供描述。
單擊上傳按鈕后,這就是我要執行的操作:
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();
?>
如果有許多開發人員已經對同一事物進行了更好的編程,那么我建議不要創建自己的異步文件上傳功能。 查看以下選項:
我以前用過這兩個,它們工作得很好。 對於BlueImp,您可以使用此選項發送其他表單數據:
$('#fileupload').fileupload({
formData: $('.some_form').serialize()
});
上面捕獲了一個表格並序列化了其輸入。 另外,您可以使用特定的值(例如,從DOM中的特定元素中)填充數組或對象:
var array = new Array();
$('.description').each(function() {
array[this.id] = this.value;
});
您將使用ID來鏈接文件和描述。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.