send requests with js to php

Question

I create a simple upload files system with php and javascript but when I want to sending input[text] value data didn't send

this my html code :

    <div id="upload_video">
<div id="close_btupvid">×</div>
<div class="upload_video">
<div id="statu"></div>
<h2>Upload Video</h2>
  <div id="status"></div>
<form enctype="multipart/form-data" method="post">
<input type="file" name="up_vid" id="up_vid"/>
<div class="upload_v_icon"></div>
<div class="video_info">
<input type="text" name="video_title" placeholder="Video Title" id="video_title"/>
<input type="text" name="tags" placeholder="Tags (funny,9gag,cool,amazing ...)"/>
<textarea name="description" placeholder="video description"></textarea>
</div>
<div class="bg_upload">
<p>When you upload this video your agree with <a href="">Terms</a> of service.</p>
<input type="button" name="upload_v_bt" value="Begin Upload"  onclick="uploadvideo()"/>
</div>
</form>
</div>
</div>

and this is my js code :

<script>
function _(el){
    return document.getElementById(el);
}
function uploadvideo(){
    var video_file = _("up_vid").files[0];
    //alert(video_file.name+" | "+video_file.size+" | "+video_file.type);
    var formvideo = new FormData();
    formvideo.append("up_vid", video_file);
    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);
    if((video_file.type == "video/mp4") || (video_file.type == "video/flv")) {
    var video_titl = document.getElementById("video_title").value;
    var vars = "video_title="+video_titl;
alert(video_titl);
    ajax.open("POST", "functions/video.php",true);
    ajax.send(formvideo);
     // Send the data to PHP now... and wait for response to update the status div
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            var return_data = ajax.responseText;
            document.getElementById("statu").innerHTML = return_data;
        }
    }
    ajax.send(vars); // Actually execute the request
    document.getElementById("statu").innerHTML = "<center><i class='fa fa-spinner fa-pulse fa-x fa-fw' style='color:#000; position:relative; top:6px;'></i></center>";

    }else{
var divc = document.createElement("div");
divc.innerHTML = "The file must be Extensions (.jpg,.png)";
divc.setAttribute('id', 'error'); // and make sure myclass has some styles in css
//div.setAttribute('class', 'container animated fadeInDown'); // and make sure myclass has some styles in css
document.getElementById('upload_video').appendChild(divc);  
}
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("statu").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("statu").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("statu").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("statu").innerHTML = "Upload Aborted";
}
</script>

this my php code :

$fileName = $_FILES["up_vid"]["name"]; // The file name
$fileTmpLoc = $_FILES["up_vid"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["up_vid"]["type"]; // The type of file it is
$fileSize = $_FILES["up_vid"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["up_vid"]["error"]; // 0 for false... and 1 for true
$upload = move_uploaded_file ($fileTmpLoc,'../'.$fileName);
echo $_POST['video_title'];

Please help me to fix this problem

Maybe related to the size being uploaded, see stackoverflow.com/questions/8961780/… — mikeyq6
– mikeyq6, Commented Jan 25, 2016 at 17:42
did you try ("POST", "functions/video.php?video_titl=' " +video_titl +" ' ",true); — MadeInDreams
– MadeInDreams, Commented Jan 25, 2016 at 17:46

Decoded · Accepted Answer · 2016-01-25 17:52:44Z

1

First, correct your script tag

<script type="text/javascript"></script>

Above your script, include JQuery

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

I'm not sure about the '_()' nomenclature, but similarly with jQuery you can avoid 'document.getElementById' by using the following $(<ELEMENT_NAME>) pattern. See below

$("loaded_n_total").html("<p>Uploaded "+event.loaded+" bytes of "+event.total + "</p>");
var percent = (event.loaded / event.total) * 100;
$("progressBar").value = Math.round(percent);
$("statu").html("<p>" +Math.round(percent)+"% uploaded... please wait</p>")

You should move the click handler into a script as well, and set a class selector name on the input

<input class="uploadVidSubmit" type="Button" value="click me"></input>

And the js

//in your js file
$("uploadVidSubmit").click(function(e) 
{
    uploadVideo();
});

Last, insure the scripts are in the 'head' tag of the document and included as seprate JS files

<script type="text/javascript" src="myclickhandler.js"></script>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

You are sending 'POST' but you are specifing 'application/x-url-encoded...' Insure the mime type is correct. For uploading video, my .htaccess has

AddType video/avi .avi
AddType video/quicktime .mov
AddType video/mpeg .mpeg .mpg
AddType video/mp4 .mp4

And lastly, check Charles to see if there are outgoing requests when you click(or not)

edited Jan 25, 2016 at 17:52

answered Jan 25, 2016 at 17:49

Decoded

1,14513 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mikeyq6 Over a year ago

Don't need to explicitly add type="text/javascript" anymore in HTML5, as it is already the default value.

Decoded Over a year ago

Yes true, us oldschool guys like to see it :). Ya know, we avoid new 'magic'

Dustin Stiles · Accepted Answer · 2016-01-25 17:49:19Z

0

My reputation isn't high enough to comment, because I'm a loser. This should be a comment and not an answer.

I do notice you are sending the request twice, once with the form video and once with the title. Could this have an impact?

When you send the request, you can totally send a plain js object. Have you tried to store the title and the video on an object and send it all in one go?

Php could recognize that object with the global post variable.

so

ajax.send({ title: 'foo', video: someVideo });

// can translate to
$_POST['title'] && $_POST['video']

EDIT: Sending objects this way works on IE8 and up, and the majority of other browsers

edited Jan 25, 2016 at 17:49

answered Jan 25, 2016 at 17:43

Dustin Stiles

1,4349 silver badges12 bronze badges

Collectives™ on Stack Overflow

send requests with js to php

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related