發送請求與JS到PHP

Question

我用PHP創建一個簡單的上傳文件系統和JavaScript，但是當我想要發送的輸入[文字]值數據未發送

這是我的html代碼：

<div id="upload_video"> 
<div id="close_btupvid">×</div> 
<div class="upload_video"> 
<div id="statu"></div> 
<h2>Upload Video</h2> 
    <div id="status"></div> 
<form enctype="multipart/form-data" method="post"> 
<input type="file" name="up_vid" id="up_vid"/> 
<div class="upload_v_icon"></div> 
<div class="video_info"> 
<input type="text" name="video_title" placeholder="Video Title" id="video_title"/> 
<input type="text" name="tags" placeholder="Tags (funny,9gag,cool,amazing ...)"/> 
<textarea name="description" placeholder="video description"></textarea> 
</div> 
<div class="bg_upload"> 
<p>When you upload this video your agree with <a href="">Terms</a> of service.</p> 
<input type="button" name="upload_v_bt" value="Begin Upload" onclick="uploadvideo()"/> 
</div> 
</form> 
</div> 
</div> 

，這是我的js代碼：

<script> 
function _(el){ 
    return document.getElementById(el); 
} 
function uploadvideo(){ 
    var video_file = _("up_vid").files[0]; 
    //alert(video_file.name+" | "+video_file.size+" | "+video_file.type); 
    var formvideo = new FormData(); 
    formvideo.append("up_vid", video_file); 
    var ajax = new XMLHttpRequest(); 
    ajax.upload.addEventListener("progress", progressHandler, false); 
    ajax.addEventListener("load", completeHandler, false); 
    ajax.addEventListener("error", errorHandler, false); 
    ajax.addEventListener("abort", abortHandler, false); 
    if((video_file.type == "video/mp4") || (video_file.type == "video/flv")) { 
    var video_titl = document.getElementById("video_title").value; 
    var vars = "video_title="+video_titl; 
alert(video_titl); 
    ajax.open("POST", "functions/video.php",true); 
    ajax.send(formvideo); 
    // Send the data to PHP now... and wait for response to update the status div 
     ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    // Access the onreadystatechange event for the XMLHttpRequest object 
    ajax.onreadystatechange = function() { 
     if(ajax.readyState == 4 && ajax.status == 200) { 
      var return_data = ajax.responseText; 
      document.getElementById("statu").innerHTML = return_data; 
     } 
    } 
    ajax.send(vars); // Actually execute the request 
    document.getElementById("statu").innerHTML = "<center><i class='fa fa-spinner fa-pulse fa-x fa-fw' style='color:#000; position:relative; top:6px;'></i></center>"; 

    }else{ 
var divc = document.createElement("div"); 
divc.innerHTML = "The file must be Extensions (.jpg,.png)"; 
divc.setAttribute('id', 'error'); // and make sure myclass has some styles in css 
//div.setAttribute('class', 'container animated fadeInDown'); // and make sure myclass has some styles in css 
document.getElementById('upload_video').appendChild(divc); 
} 
} 
function progressHandler(event){ 
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; 
    var percent = (event.loaded/event.total) * 100; 
    _("progressBar").value = Math.round(percent); 
    _("statu").innerHTML = Math.round(percent)+"% uploaded... please wait"; 
} 
function completeHandler(event){ 
    _("statu").innerHTML = event.target.responseText; 
    _("progressBar").value = 0; 
} 
function errorHandler(event){ 
    _("statu").innerHTML = "Upload Failed"; 
} 
function abortHandler(event){ 
    _("statu").innerHTML = "Upload Aborted"; 
} 
</script> 

這是我的PHP代碼：

$fileName = $_FILES["up_vid"]["name"]; // The file name 
$fileTmpLoc = $_FILES["up_vid"]["tmp_name"]; // File in the PHP tmp folder 
$fileType = $_FILES["up_vid"]["type"]; // The type of file it is 
$fileSize = $_FILES["up_vid"]["size"]; // File size in bytes 
$fileErrorMsg = $_FILES["up_vid"]["error"]; // 0 for false... and 1 for true 
$upload = move_uploaded_file ($fileTmpLoc,'../'.$fileName); 
echo $_POST['video_title']; 

請幫我解決這個問題

Answer 1

我的名聲不夠高評論，因爲我是一個失敗者。這應該是一個評論，而不是一個答案。

我注意到您要發送兩次請求，一次使用表格視頻，一次使用標題。這會產生影響嗎？

當你發送請求時，你完全可以發送一個普通的js對象。您是否嘗試將標題和視頻存儲在一個對象上並一次發送完畢？

Php可以識別具有全局post變量的對象。

所以

ajax.send({ title: 'foo', video: someVideo }); 

// can translate to 
$_POST['title'] && $_POST['video'] 

編輯：發送對象這種方式適用於IE8及以上，且大部分的其他瀏覽器

Answer 2

首先，糾正你的腳本標籤

<script type="text/javascript"></script> 

你上面的腳本，包括JQuery

<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 

我不確定'_（）'的命名法，但與jQuery類似，您可以通過使用以下$（<ELEMENT_NAME>）模式來避免「document.getElementById」。見下面

$("loaded_n_total").html("<p>Uploaded "+event.loaded+" bytes of "+event.total + "</p>"); 
var percent = (event.loaded/event.total) * 100; 
$("progressBar").value = Math.round(percent); 
$("statu").html("<p>" +Math.round(percent)+"% uploaded... please wait</p>") 

你應該將單擊處理到一個腳本，以及，在輸入

<input class="uploadVidSubmit" type="Button" value="click me"></input> 

而且JS

//in your js file 
$("uploadVidSubmit").click(function(e) 
{ 
    uploadVideo(); 
}); 

最後一組類選擇名稱，投保腳本位於文檔的「head」標籤中，幷包含在單獨的JS文件中

<script type="text/javascript" src="myclickhandler.js"></script> 
<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 

您正在發送'POST'，但您指定'application/x-url-encoded ...' 確保mime類型正確。對於上傳視頻，我的.htaccess有

AddType video/avi .avi 
AddType video/quicktime .mov 
AddType video/mpeg .mpeg .mpg 
AddType video/mp4 .mp4 

最後，檢查Charles，看看是否有當您單擊（或沒有）