upload file with jquery - php

Question

I want to upload a file with ajax
here is my code
php, html:
<form action="uploadVideo.php" method="POST" enctype="multipart/form-data">
<input type="file" name="choosefilebtn" id="choosefilebtn" size="50" />
<input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />
</form>
jquery:
$(function() {
$('#uploadbtn').click(function() {
var filename = $('#choosefilebtn').val();
alert(filename);
$.ajax({
type: "POST",
url: "uploadVideo.php",
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function() {
alert("Data Uploaded: ");
}
});
});
});
when I use type sumbmit for upload button ( without ajax) it works, but with ajax it doesnt work, can any body help me,
Thanks
Edit:
Added uploadVideo.php code
$publish->remotehost=$ftpremotehost;
$publish->username=$ftpusername;
$publish->password=$ftppassword;
$publish->remotedir=CONSTANT_SERVERROOT.$folderName;
$publish->filename=$_FILES['choosefilebtn']['name'];
$publish->FTPLogin();
$publish->filecontent = fread( fopen($_FILES['choosefilebtn']['tmp_name'], "rb"),
$_FILES['choosefilebtn']['size']);
$publish->makedir($publish->remotedir);
$result=$publish->Publish();

Answer 1

You'll notice with the ajax call you are sending the filename, and not the contents of that file:
$.ajax({
//...
data: {
file: filename //just a name, no file contents!
},
//...
});
the only way that I am aware of sending file data via ajax is using a hidden iframe and submitting a form to that
i.e. have
<iframe style="display: none" id="formtarget" />
<form action="uploadVideo.php" method="POST" enctype="multipart/form-data"
target="formtarget">
<input type="file" name="choosefilebtn" id="choosefilebtn" size="50" />
<input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />
</form>

Answer 2

markup
<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="FileInput" id="FileInput" type="file" />
<input type="submit" id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="progressbox">
<div id="progressbar"></div>
<div id="statustxt">0%</div>
</div>
<div id="output"></div>
jquery
$(document).ready(function () {
var options = {
target: '#output', // target element(s) to be updated with server response
beforeSubmit: beforeSubmit, // pre-submit callback
success: afterSuccess, // post-submit callback
uploadProgress: OnProgress, //upload progress callback
resetForm: true // reset the form after successful submit
};
$('#MyUploadForm').submit(function () {
$(this).ajaxSubmit(options);
return false;
});
});