0

这是我今天遇到的一个非常简单的问题，这让我非常沮丧：假设我正在通过 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>
4

1 回答 1

2

您需要使用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-17T18:56:20.223 回答