Question

我需要在此处添加什么内容以添加上传视频的功能？

<div id="title">Upload Videos</div>
<div class="vidUpload">
    <form id="vidUpload" enctype="multipart/form-data">
<input name="vidName" type="text" required="required" id="vidName" placeholder="Enter Video Name Here" title="Video Name">
<br>
<textarea name="videoDescription" id="videoDescription" required class="videoDescription" placeholder="Enter Video Description Here" title="Enter Video Description Here"></textarea>

<select name="select" required class="choosevidCat" id="choosevidCat">
<option value="">Choose the Catagory for your Video Here</option>
            <?php 
    $sql = ("SELECT albumId, albumName, albumSelect FROM albums");
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($mysqli, $sql);

while($row = mysqli_fetch_array($result)) {
$albumid = ($row['albumId']);
$album_name = ($row['albumName']);
$album_name1 = ($row['albumSelect']);
echo "<option value=".$album_name1. ">$album_name</option>";
}

?>


<option id="createCat" value="createCatagory">Create New Catagory Here</option>
</select>

<input type="file" name="video" id="video">
<input type="button" name="videoToUpload" id="videoToUpload" value="Upload">

</form>
<div id="loader"></div>
<div id="viduploadResult"></div>

jquery的

<script type="text/javascript">

$(document).ready(function() {

    $("#videoToUpload").click(function() {

var vidName = $("#vidName").val();
var videoDescription = $("#videoDescription").val();
var albumName1 = $("#choosevidCat").val();
var vidFile =$("#video").val();

  // Put an animated GIF image insight of content
  $("#loader").empty().html('<img src="/images/loader.gif" class="vidloader1"/>');

        $.post("includes/vid_upload.inc.php",{vidName: vidName, videoDescription: videoDescription, albumName1: albumName1,  vidFile: vidFile}, function(json)
         {

            if(json.result === "success") {

        $("#viduploadResult").html( "The Video "+vidName+" has been Uploaded!");


//        // First remove all the existing options
//       $('#choosevidCat').empty();
//
//        // Load the content:
//        $('#choosevidCat').load(location.href + "#choosevidCat > *");

    }else{
        $("#viduploadResult").html(json.message);
    }   

         });
    });
})
</script>

我花了好几个小时看着像blueimp等的API，我只想上传一个视频文件并将其放在我的服务器上。任何帮助将不胜感激

Answer 1

您只是传递输入类型文件的值。您应该将文件流传递给服务器脚本。以下是使用jquery上传文件的示例代码。注意：我只编写jquery代码来提交文件。您必须编写服务器端代码（PHP脚本）才能上载所请求的文件。

以下代码可帮助您上传文件。根据您的方案自定义

if($("#video")[0].files.length)
{
    this.total_files = $("#video")[0].files.length;
    this.start_process = 0;
    $.each($("#video")[0].files, function(i,o){
        var files = new FormData();
        files.append(1, o);
    });
    $.ajax({
        url:"http://example.com",
        method:"POST",
        contentType:false,
        processData: false,
        data:files,
        async:true,
        xhr: function()
        {
            if(window.XMLHttpRequest)
            {   var xhr = new window.XMLHttpRequest();
                //Upload progress
                xhr.upload.addEventListener("progress", function(evt){
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        //Do something with upload progress
                    }
                }, false);
            }
        },
        success:function(data){
            alert("file uploaded..");
        }   
    });
}

Answer 2

经过进一步研究后，我发现这个脚本和视频教程提供了解决方案，所以我想把它添加到我自己的问题中

网络教程 https://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP

视频教程 http://www.youtube.com/watch?v=EraNFJiY0Eg

使用Jquery和Ajax / Json

2 个答案: