CODEWITHSUNDEEP
javascriptphpjqueryajaxjson
Tiny
Tiny

Reputation: 363

Uploading a video using Jquery and Ajax/Json

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

Upvotes: 1

Views: 18288

Answers (2)

Muhammmad Hadi Rajani
Muhammmad Hadi Rajani

Reputation: 611

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

Upvotes: 2

Tiny
Tiny

Reputation: 363

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.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP

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

Upvotes: 1

Related Questions