Question

这是我今天遇到的一个非常简单的问题，对我来说非常令人沮丧：假设我通过HTML'选择文件'输入上传视频文件，我有一个提交按钮，调用onclick java脚本函数将视频发送到php文件，并将有关视频的数据返回到原始页面，（通过XMLhttpRequest（）完成像echo $ _FILES [$ myvideoupload] ['name']这样简单的事情）。

这可能吗？

就像现在一样，视频根本没有通过我的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>

Answer 1

您需要使用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库。

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

1 个答案: