Soumettre un formulaire avec ajax

Question

Je veux télécharger une vidéo à Bits on the Run en utilisant ajax.

Quand je télécharger une vidéo en affichant une forme, comme ils expliquent ici: http://www.longtailvideo.com/support/bits-on-the-run/15984/upload-videos-within-your-cms

Il fonctionne très bien, mais quand j'essayer d'utiliser jQuery poster ça ne fonctionne pas. Le code que j'utilise pour le poste jQuery est:

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

Quand je soumets la forme l'alerte de l'URL montre http://upload.bitsontherun.com/v1/videos/upload et l'alerte de dataToBeSent montre key = XXX & api_format = JSON & uploadToken = YYY & jeton = YYY

mais rien ne se passe.

Une idée pourquoi?

------------------------------ mise à jour --------------- -------------- J'ai essayé d'utiliser un iframe caché et d'ajouter une cible au formulaire, mais cela ne fonctionne pas, le formulaire est soumis et la page entière est en cours de rafraîchissement. . des idées?

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

---

Answer 1

Vous ne pouvez pas envoyer des champs de saisie de fichiers via ajax comme ça. Vous ne pouvez envoyer des fichiers au serveur qu'en publiant un élément de formulaire (via le formulaire de soumission de formulaire du navigateur, pas via ajax).

Eh bien, d'accord, soumettre le formulaire n'est pas votre seulement façon. Il y a deux ou trois autres, chacun avec ses problèmes:

1. Si votre utilisateur utilisait un navigateur qui a soutenu la nouvelle File API, vous pouvez lire le fichier avec JavaScript côté client et après que les données sur le serveur via ajax, mais cela demande beaucoup plus que d'envoyer un formulaire normalement, et la prise en charge de l'API File est encore assez sommaire.)

2. Vous pouvez utiliser un widget de téléchargement Flash.

... mais une soumission simple de formulaire simple est éprouvée et ne nécessite pas que l'utilisateur ait quelque chose de spécial installé. Vous pouvez rendre le target de l'élément form caché à iframe afin que votre page ne soit pas détruite par la soumission du formulaire, si c'est ce que vous cherchez à éviter. Vous pouvez ensuite regarder le iframe pour le résultat, pour informer l'utilisateur.

Answer 2

Les données des éléments de sélection de fichier ne sont pas sérialisées.

- http://api.jquery.com/serialize/

Si vous souhaitez télécharger des fichiers sans quitter la page, vous devez utiliser un iframe caché ou quelque chose comme une applet Flash, vous ne pouvez pas utiliser XMLHttpRequest.

Answer 3

Vous devez utiliser des iframes ou quelque chose comme ça pour faire ce que vous voulez ...regarde ici http://valums.com/ajax-upload/ Je pense que c'est ce que tu veux.

Answer 4

Je pense que votre problème pourrait être que cela ne fonctionnera pas par un appel direct ajax. C'est quelque chose que vous verrez plus dans le monde des API. Avec last.fm, il n'est pas non plus possible de faire ces appels directs.

C'est pourquoi vous pourriez essayer d'appeler votre propre fichier php qui contactera l'URL que vous essayez de contacter. Faire usage de curl pour appeler ce service.

Donc ce que je fais est de donner tous les paramètres de l'appel à mon fichier php, avec l'appel API (comme télécharger, supprimer, ...). Sur le serveur je vais créer l'appel en utilisant curl pour le faire. Lorsque vos données retournent, vous l'imprimez sur votre page et vous pouvez l'utiliser dans votre application.