首页 文章

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

提问于
浏览
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" />
</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>

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库 .

相关问题