I want to upload a video to Bits on the Run using ajax.
When I upload a video by posting a form, like they explain here : http://www.longtailvideo.com/support/bits-on-the-run/15984/upload-videos-within-your-cms
It works fine, but when I try using jQuery post it doesn't work. The code I use for the jQuery post is :
<?php
require_once('botr/init_api.php');
# Do the API call to build an upload URL.
# The 'token' MUST be the last parameter for upload progress to work.
$response = $botr_api->call('/videos/create');
$token = $response['link']['query']['token'];
if ($response['status'] == 'error') { die(print_r($response)); }
$url = 'http://'.$response['link']['address'].$response['link']['path'];
# Print the page. All identifiers inside the form are used to display the upload progress.
?>
<script type="text/javascript">
$(document).ready(function() {
$('#uploadForm').submit(function() {
开发者_运维知识库 var url = $(this).attr('action');
alert(url);
var dataToBeSent = $(this).serialize();
alert(dataToBeSent);
$.post(url, dataToBeSent, function(data, textStatus) {
//data contains the JSON object
//textStatus contains the status: success, error, etc
alert("textStatus");
alert(textStatus);
}, "json");
return false
});
});
</script>
<form id="uploadForm" action="<?=$url?>" method="POST" enctype="multipart/form-data">
<fieldset>
<label>Select video</label><br>
<input id="uploadFile" type="file" name="file" />
<input id="key" type="hidden" name="key" value="<?=$response['link']['query']['key']?>" />
<input id="api_format" type="hidden" name="api_format" value="json" />
<input id="uploadToken" type="hidden" name="uploadToken" value="<?=$token?>" />
<input id="token" type="hidden" name="token" value="<?=$token?>" />
<div id="uploadBar" style="width:480px; float:left; display:none; background:#FFF; margin:5px 0;">
<div id="uploadProgress" style="background:#46800d; width:0px; height:18px;"></div></div>
<p class="hint">
You can upload any video format (WMV, AVI, MP4, MOV, FLV, ...)
</p>
<button type="submit" id="uploadButton">Upload</button>
</fieldset>
</form>
When I submit the form the alert of the url shows http://upload.bitsontherun.com/v1/videos/upload and the alert of dataToBeSent shows key=XXX&api_format=json&uploadToken=YYY&token=YYY
but than nothing happens.
Any Ideas why?
------------------------------ update----------------------------- I've tried using a hidden iframe and add target to the form but it doesn't work, the form is being submitted and the whole page is being refreshed... any ideas?
<form id="uploadForm" terget="botr_ifram" action="<?=$url?>" method="POST" enctype="multipart/form-data" >
<fieldset>
<label>Select video</label><br>
<input id="uploadFile" type="file" name="file" />
<input id="uploadToken" type="hidden" name="uploadToken" value="<?=$token?>" />
<div id="uploadBar" style="width:480px; float:left; display:none; background:#FFF; margin:5px 0;">
<div id="uploadProgress" style="background:#46800d; width:0px; height:18px;"></div></div>
<p class="hint">
You can upload any video format (WMV, AVI, MP4, MOV, FLV, ...)
</p>
<button type="submit" id="uploadButton">Upload</button>
</fieldset>
</form>
<iframe width="0" id=”botr_ifram” name="botr_ifram" height="0" border="0" frameborder="0" scrolling="auto" align="center" hspace="0" vspace=""></iframe>
I think your problem could be that it won't work through a direct ajax call. It's something you will see more in the world of API's, With last.fm it's also not possible to do those direct calls.
Thats why you could try to call your own php file wich will contact the url you now are trying to contact. Make use of curl
to call that service.
So what I do is give all the params in de the call to my php file, together with the api call (like upload, remove,...). On the server I will create the call en use curl
to do that. When your data returns you print it on your page and you can use it in your application.
You can't send file input fields via ajax like that. You can only send files to the server by actually posting a form element (via the browser's form submission stuff, not via ajax).
Well, okay, submitting the form isn't your only way. There are a couple of others, each with its problems:
If your user were using a browser that supported the new File API, you could read the file with client-side JavaScript and post that data to the server via ajax, but it's a lot more work than just sending in a form in the normal way, and support for the File API is still quite sketchy.)
You could use a Flash-based uploader widget.
...but a nice simple form submission is tried-and-true and doesn't require that the user have anything special installed. You can make the target
of the form
element a hidden iframe
so that your page doesn't get torn down by the form submission, if that's what you're looking to avoid. You can then watch the iframe for the result, to notify the user.
Data from file select elements is not serialized.
— http://api.jquery.com/serialize/
If you want to upload files without leaving the page, then you need to use a hidden iframe or something like a Flash applet, you can't use XMLHttpRequest.
You have to use iframes or something like that to do what you want...look here http://valums.com/ajax-upload/ i think it's what you want.
精彩评论