What do I need to add to my code here to add the ability to upload a video?

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

I have spent hours looking at API's like blueimp etc, I just want to upload a video file and put it on my server from the form I have here. Any help would be greatly appreciated

What do I need to add to my code here to add the ability to upload a video?

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

I have spent hours looking at API's like blueimp etc, I just want to upload a video file and put it on my server from the form I have here. Any help would be greatly appreciated

• javascript
• php
• jquery
• ajax
• json

Share Improve this question Follow edited Apr 29, 2015 at 0:28 HaveNoDisplayName 8,517106106 gold badges4040 silver badges5050 bronze badges asked Apr 26, 2015 at 21:43 TinyTiny 36322 gold badges66 silver badges2020 bronze badges 1

• This question looks like asking for alternatives ("suggest me...") kind of question. These are not allowed on Stack Overflow, since they don't address specific programming issues, are too broad and basically depend on users' choices more than other stuff. Try to make questions like "I'm using... and I've tried this... but it doesn't work." instead of "I wanna do this... tell me some alternatives". Before asking, read stackoverflow./help/on-topic on a future. Good luck! – Alejandro Iván Commented Apr 29, 2015 at 0:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You are just passing the value of input type file. You should pass the file stream to your server script. Here is a sample code for uploading files using jquery. Note: I am writing only jquery code to submit file. You must have to write server side code (PHP script) to upload the requested file.

Following code will help you to upload files. Customize it according to your scenario

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.",
        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..");
        }   
    });
}

After further research I found this script and video tutorial which provided a resolution, so thought I would add it to my own question

Web Tutorial https://www.developphp./video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP

Video Tutorial http://www.youtube./watch?v=EraNFJiY0Eg