使用JAVASCRIPT

时间:2016-02-04 07:06:40

标签: javascript php

我有一个程序,我希望上传视频文件,并发布数据。我从来没有一起做过,也不确定如何做到这一点。我希望只使用Javascript,没有jquery这样做。有没有人有一个建议,我可以找到如何做到这一点?任何方向将不胜感激。

<小时/>

使用Javascript:    

function uploadFile(){
var title = _('title').value;
var genere = _('genere').value;
var stars = _('stars').value;
var description = _('description').value;
    var file = _("video").files[0];
     //alert(file.name+" | "+file.size+" | "+file.type);
    var formdata =  new FormData();
formdata.append("video", file);
formdata.append("title", title);
formdata.append("genere", genere);
formdata.append("stars", stars);
formdata.append("description", description);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "video_php/video_upload.php");
    ajax.send(formdata);
}
function progressHandler(event){
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

php是:

<?PHP
$fileName = '';
$fileTmpLoc = '';
$fileType = '';
$fileSize = '';
$title = '';
$genere = '';
$stars = '';
$description = '';
$retn=  '';
if (!isset($_FILES["video"]["name"])) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}else{
    $fileName       =   $_FILES["video"]["name"]; // The file name
$fileTmpLoc     =   $_FILES["video"]["tmp_name"]; // File in the PHP tmp folder
$fileType       =   explode('.',$fileName); // The type of file it is
$fileType       =   end($fileType); // The end type of file it is
$fileSize       =   $_FILES["video"]["size"]; // File size in bytes
$title = preg_replace('#[^a-z0-9, ]#i', '', $_POST['title']);
$genere = preg_replace('#[^a-z0-9, ]#i', '', $_POST['genere']);
$stars = preg_replace('#[^a-z0-9, ]#i', '', $_POST['stars']);
$description = preg_replace('#[^a-z0-9, ]#i', '', $_POST['description']);
if(!isset($_POST['title'])){
    $retn .= 'No Title';
}
if(!isset($_POST['genere'])){
    $retn .= 'No Genere';
}
if(!isset($_POST['description'])){
    $retn .= 'No Description';
}
if($retn == ''){
    $retn_res = $retn.'<br/>Please retry.';echo $retn_res;exit();
}
}
echo $fileName.'<br/>';
echo $fileTmpLoc.'<br/>';
echo $fileType.'<br/>';
echo $fileSize.'<br/>';
echo $title.'<br/>';
echo $genere.'<br/>';
echo $description.'<br/>';
?>

我已经通过谷歌搜索了一段时间。没运气。如果对我希望这个项目如何运作有任何希望,我认为这是唯一的方法 回答说:

我需要附加到formdata 其中formdata.append("video", file);我添加了formdata.append("title", title);以及其他具有正确名称的输入字段。例如:

formdata.append("video", file);
formdata.append("title", title);
formdata.append("genere", genere);
formdata.append("description", description);

从那时起,它将所有数据发送到我的PHP文件,在那里很容易进行操作。非常感谢这个用户https://stackoverflow.com/users/1206267/ohgodwhy,谁让它易于理解。
上面的代码已经过编辑以反映这些变化,而回答问题的链接是Combine $_FILES and $_POST into one AJAX call with Javascript only

1 个答案:

答案 0 :(得分:1)

您可以使用像

这样的javascript库

http://www.dropzonejs.com/

它不依赖于jquery