使用XMLHttpRequest将Html视频上载发送到php文件_Php_Html_File Upload_Xmlhttprequest

使用XMLHttpRequest将Html视频上载发送到php文件

php html file-upload

使用XMLHttpRequest将Html视频上载发送到php文件,php,html,file-upload,xmlhttprequest,Php,Html,File Upload,Xmlhttprequest,我今天遇到了一个非常简单的问题，这让我非常沮丧：假设我正在通过HTML“choose file”输入上传一个视频文件，我有一个submit按钮，该按钮调用onclick java脚本函数将视频发送到php文件，并将视频数据返回到原始页面（类似echo$_FILES[$myvideoupload]['name']），全部通过XMLhttpRequest（）这可能吗就目前而言，视频根本没有通过我的ajax函数传递到php文件。document.getElementByID（“stuff”）是否

我今天遇到了一个非常简单的问题，这让我非常沮丧：假设我正在通过HTML“choose file”输入上传一个视频文件，我有一个submit按钮，该按钮调用onclick java脚本函数将视频发送到php文件，并将视频数据返回到原始页面（类似echo$_FILES[$myvideoupload]['name']），全部通过XMLhttpRequest（）

这可能吗

就目前而言，视频根本没有通过我的ajax函数传递到php文件。document.getElementByID（“stuff”）是否适用于视频文件？或者更多的是关于如何在send（var）中格式化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>


函数文件_upload（）{
var hr=新的XMLHttpRequest（）；
var url=“vidcon.php”；
if（document.getElementById（'preset_mp4'）。选中）{
pr=document.getElementById（“预置_mp4”）.值；
}else if（document.getElementById（'preset_ogg'）。选中）{
pr=document.getElementById（“预设值”）.value；
}else if（document.getElementById（'preset_mov'）。选中）{
pr=document.getElementById（“预设值”）.value；
}else if（document.getElementById（'preset_wmv'）。选中）{
pr=document.getElementById（“预设值”）.value；
}else if（document.getElementById（'preset_3gp'）。选中）{
pr=document.getElementById（“预设值”）.value；
}
//var fd=新FormData（）；
//fd.append（'uploadedfile'，document.getElementByID（“uploadedfile”）.files[0]）；
var vars=“预设=”+pr；
hr.open（“POST”，url，true）；
hr.setRequestHeader（“内容类型”、“应用程序/x-www-form-urlencoded”）；
hr.onreadystatechange=函数（）{
如果（hr.readyState==4&&hr.status==200）{
var return_data=hr.response；
document.getElementById（“status”）.innerHTML=返回数据；
}
}
人力资源发送（vars）；
document.getElementById（“status”）.innerHTML=“处理…”；
}
选择pload:


选择转换的输出格式（将更改转换设置）

mp4

ogg

mov

wmv

3gp

您需要使用对象通过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库。

感谢Musa的快速响应，但我在理解程序上下文中的代码时仍有困难。你在附加什么？send（）可以同时处理字符串和视频文件吗？@DrewPaul我的错误是，它被认为是一个对象而不是一个输入文件控件，是的，你可以添加字符串。我提供的链接告诉你可以添加什么类型的数据。遗憾的是，我的问题没有得到解决。让我重新表述一下我的问题：我有一个php文件，它接收一个视频文件，以及一个表示预设和返回URL的字符串。我有一个简单的html页面，可以上传视频，单击预设的radiobutton按钮，并在单击submit按钮后调用php文件作为操作。这将引导您进入返回URL的php文件页面。问题是我想留在页面上，所以我转向ajax，混乱随之而来。因此，我面临的基本问题是，我似乎无法将html用户文件上传到Ajax到我的php文件中，我可以获得要发送的预设。但仍然无法让上传工作。这能与文件上传一起工作吗//这是在获取html数据var vars=“preset=“+pr；hr.open（“POST”，url，true）；hr.setRequestHeader（“内容类型”、“应用程序/x-www-form-urlencoded”）；hr.onreadystatechange=function（）{if（hr.readyState==4&&hr.status==200）{var return\u data=hr.response；document.getElementById（“status”）.innerHTML=return\u data；}}}hr.send（vars）；document.getElementById（“状态”）.innerHTML=“处理…”；}谢谢你，穆萨。因为你的知识，我能够超越这个问题。