使用XMLHttpRequest發送到PHP文件的HTML視頻上傳

以下是我今天遇到的一個非常簡單的問題，對我來說非常令人沮喪：假設我通過HTML'選擇文件'輸入上傳視頻文件，一個提交按鈕，它調用一個onclick java腳本函數，將視頻發送到一個php文件，並通過XMLhttpRequest返回有關視頻的數據返回原始頁面（像echo $ _FILES [$ myvideoupload] ['name']）（）。使用XMLHttpRequest發送到PHP文件的HTML視頻上傳

這可能嗎？

現在，視頻根本就沒有通過我的ajax函數傳遞給php文件。 document.getElementByID（「stuff」）是否適用於視頻文件？或者更多關於我應該如何格式化var in send（var）？任何關於通過XMLHttpRequest（）傳遞文件的想法或知識都會很棒。

這是我不太好用的代碼，文件嘗試在js中註釋掉了。希望這可以幫助。

<html> 
<head> 

<link href="jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="jquery.js"></script> 
<script src="jquery-ui.js"></script> 


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

function file_upload(){ 
    var hr = new XMLHttpRequest(); 
    var url = "vidcon.php"; 

    if(document.getElementById('preset_mp4').checked) { 
     pr = document.getElementById("preset_mp4").value; 
    }else if(document.getElementById('preset_ogg').checked) { 
    pr = document.getElementById("preset_ogg").value; 
    }else if(document.getElementById('preset_mov').checked) { 
    pr = document.getElementById("preset_mov").value; 
    }else if(document.getElementById('preset_wmv').checked) { 
    pr = document.getElementById("preset_wmv").value; 
    }else if(document.getElementById('preset_3gp').checked) { 
     pr = document.getElementById("preset_3gp").value; 
} 

    //var fd = new FormData(); 
    //fd.append('uploadedfile', document.getElementByID("uploadedfile").files[0]); 
    var vars = "preset="+pr; 
    hr.open("POST", url, true); 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
       var return_data = hr.response; 
     document.getElementById("status").innerHTML = return_data; 
       } 
} 

hr.send(vars); 
document.getElementById("status").innerHTML = "processing..."; 
} 
</script> 
</head> 

<body> 
<input type="hidden"/> 
<form enctype="multipart/form-data" action="" method="POST"> 
Choose pload:<br> <input id="uploadedfile" name="uploadedfile" type="file" /><br /> 
</form> 
Select Output Format for Conversion (changes will be made to conversion settings) <br> 
<div class="field form-inline radio"> 
<input id="preset_mp4" name="preset" type="radio" value="mp4">mp4<br> 
<input id="preset_ogg" name="preset" type="radio" value="ogg">ogg<br> 
<input id="preset_mov" name="preset" type="radio" value="mov">mov<br> 
<input id="preset_wmv" name="preset" type="radio" value="wmv">wmv<br> 
<input id="preset_3gp" name="preset" type="radio" value="3gp">3gp<br> 
</div> 
<input type="submit" value="Upload File" onClick="javascript:file_upload();"/> 
<div id="status"></div> 
</body>

來源

2012-10-17 Emanegux

您需要使用FormData對象通過AJAX上傳文件。類似於

var fd = new FormData(); 
fd.append('preset', pr); 
fd.append('videofile', document.getElementByID("videofileinputid").files[0]); 
hr.open("POST", url, true); 
hr.onreadystatechange = function() { 
    if(hr.readyState == 4 && hr.status == 200) { 
     var return_data = hr.response; 
     document.getElementById("status").innerHTML = return_data; 
    } 
} 
hr.send(fd); 
document.getElementById("status").innerHTML = "processing...";

請注意，並非所有瀏覽器都支持FormData對象，但都是模擬ajax文件上傳的js庫。

來源

2012-10-17 18:56:20 Musa

謝謝穆薩的快速反應，但我仍然無法理解我的程序中的代碼。你在追加什麼？可以發送（）與字符串和視頻文件一起工作嗎？ – Emanegux

@DrewPaul我的錯誤，它假設是一個[File]（https://developer.mozilla.org/en-US/docs/DOM/File）對象而不是輸入文件控件，是的，你可以添加字符串鏈接我提供了告訴你可以添加哪些類型的數據。 – Musa

不幸的是，我的問題沒有解決。讓我改述我的問題：我有一個接受視頻文件的php文件，以及代表預設和返回URL的字符串。我有一個簡單的HTML頁面，需要一個視頻上傳和一個單選按鈕點擊預設，並在點擊提交按鈕後調用php文件作爲一個動作。這將導致您到PHP文件的頁面返回的URL。問題是我想留在頁面上，因此我轉向ajax，隨之而來的是混亂。所以我有我的基本問題似乎無法獲得HTML用戶文件上傳到Ajax到我的PHP文件 – Emanegux

使用XMLHttpRequest發送到PHP文件的HTML視頻上傳

回答

相關問題