Peut onprogress fonctionnalité sera ajoutée à jQuery.ajax() à l'aide de xhrFields?

Comme suggéré ici: https://gist.github.com/HenrikJoreteg/2502497, je vais essayer d'ajouter onprogress fonctionnalité à mon jQuery.ajax() de téléchargement de fichiers. Le téléchargement fonctionne très bien, et l'événement onprogress est la cuisson, mais pas comme je m'y attendais, au lieu de feu à plusieurs reprises à un certain intervalle de temps, elle est mise à feu une seule fois, lorsque le téléchargement est terminé. Est-il un moyen de spécifier la fréquence de onprogress actualise? Ou, suis-je en train d'essayer de faire quelque chose qui ne peut pas être fait? Voici mon code:

$.ajax(
{
    async: true,
    contentType: file.type,
    data: file,
    dataType: 'xml',
    processData: false,
    success: function(xml)
    {
        //Do stuff with the returned xml
    },
    type: 'post',
    url: '/fileuploader/' + file.name,
    xhrFields:
    {
        onprogress: function(progress)
        {
            var percentage = Math.floor((progress.total / progress.totalSize) * 100);
            console.log('progress', percentage);
            if (percentage === 100)
            {
                console.log('DONE!');
            }
        }
    }
});

Je suis en train d'utiliser le même fichier javascript comme vous l'avez fait? À côté serveur , je suis à l'aide de PHP. U peut donner un certain côté serveur exemple de code, comment faire pour résoudre le fichier? il va m'aider beaucoup. $_POST['fichier'] ne fonctionne pas pour moi.

InformationsquelleAutor dcorsello | 2013-03-27

64

Réponse courte:

Non, vous ne pouvez pas faire ce que vous voulez à l'aide de xhrFields.

Réponse longue:

Il y a deux événements de progression dans un objet XmlHttpRequest:
- La réponse progrès (XmlHttpRequest.onprogress)
  
  C'est lorsque le navigateur est de télécharger les données à partir du serveur.
- La demande progrès (XmlHttpRequest.upload.onprogress)
  
  C'est lorsque le navigateur est d'envoyer les données au serveur (y compris les paramètres, cookies et fichiers)
Dans votre code que vous utilisez la réponse de la progression de l'événement, mais ce que vous avez besoin est la demande de l'événement. C'est comment vous le faites:
```
$.ajax({
    async: true,
    contentType: file.type,
    data: file,
    dataType: 'xml',
    processData: false,
    success: function(xml){
        //Do stuff with the returned xml
    },
    type: 'post',
    url: '/fileuploader/' + file.name,
    xhr: function(){
        //get the native XmlHttpRequest object
        var xhr = $.ajaxSettings.xhr() ;
        //set the onprogress event handler
        xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ;
        //set the onload event handler
        xhr.upload.onload = function(){ console.log('DONE!') } ;
        //return the customized object
        return xhr ;
    }
});
```
La xhr option paramètre doit être une fonction qui renvoie un objet natif XmlHttpRequest pour jQuery à utiliser.
- Si il n'est pas possible à l'aide de xhrFields, qu'est-ce que cet objet qui est passé à onprogress en Chrome (v34.0)?
- Je ne comprends pas ce que tu veux dire. Le problème ici est que l'utilisation de xhrFields vous peut configurer la réponse de progrès et non de la demande. Pour le second point, vous devez le faire d'une manière différente.
- Je pense que j'ai mal compris, donc merci pour la clarification. Donc xhr.addEventListener('progress', cb) (dans le xhr usine de fonction) est équivalent à xhr.xhrFields.onprogress(cb)?
- Les deux gestionnaires d'événements (de la demande et de la réponse en cours) peut être définie de deux façons différentes. Soit XHR.onprogress = handler_function ou XHR.addEventListener('progress',handler_function). La même chose avec l'autre. C'est soit XHR.upload.onprogress = handler_function ou XHR.upload.addEventListener('progress',handler_function)
InformationsquelleAutor GetFree

Vous avez besoin pour ajouter un gestionnaire d'événements à la demande elle-même avant qu'il soit envoyé. jQuery.ajax permet cela grâce à la " beforeSend propriété http://api.jquery.com/jQuery.ajax/

par exemple:
http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

* MODIFIER *
Assurez-vous de regarder le deuxième exemple de code de cet exemple de lien. Je crois que le premier est plus à jour avec les nouvelles versions de jQuery.

$.ajax({
  xhr: function()
  {
    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
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

InformationsquelleAutor CooCooCaCha

C'est un peu un hack d'une autre réponse ailleurs sur un Débordement de Pile, mais je pense que les réponses à votre question. J'ai trafiqué pour mes propres besoins de pompage "écoutés" les données du serveur vers un div scrollable (ce que je peux, alors la force de toujours faites défiler vers le bas montrant ainsi les progrès au fil du temps et donc de ne pas attendre pour l'ensemble de l'enregistrement de remplir).

La côté client code ci-dessous ajoute le contenu résultant d'un modèle prédéfini div avec l'id "scrollable_area" (qui peut alors faire défiler)...

<div style="position:absolute; left:5px; right:5px; top:5px; height:35px;">
<label for="auto_scroll">Auto Scroll</label> <input type="checkbox" id="auto_scroll" checked>
</div>
<div id="scrollable_area" style="position:absolute; overflow:auto; left:5px; right:5px; top:45px; bottom:5px;"></div>
<script type="text/javascript">
var last_response_len = false;
var auto_scroll = null;
var scrollable_area = null;
$().ready(function() {
auto_scroll = document.getElementById("auto_scroll");
scrollable_area = document.getElementById("scrollable_area");
$.ajax("your_api_call.php", {
xhrFields: {
onprogress: function(e) {
var this_response, response = e.currentTarget.response;
if(last_response_len === false) {
this_response = response;
last_response_len = response.length;
} else {
this_response = response.substring(last_response_len);
last_response_len = response.length;
}
scrollable_area.innerHTML += this_response;
if(auto_scroll.checked) {
scrollable_area.scrollTop = scrollable_area.clientHeight + scrollable_area.scrollHeight + 500;
}
}
}
})
.done(function(data) {
console.log("Completed response");
})
.fail(function(data) {
console.log("Error: ", data);
});
console.log("your_api_call.php Request Sent!");
});
</script>

La côté serveur "your_api_call.php" fichier d'appel aurait besoin de rincer sa sortie (par ligne de données afin de voir les progrès au fil du temps) qui peuvent ensuite être affichées immédiatement
dans l'au-delà "scrollable_area" div...

//Do Db loop
while ($record = $recordset->fetch(PDO::FETCH_ASSOC)) {
set_time_limit(10); //Don't timeout on large data sets seeing as this is a big task that we are wanting to watch progress!
echo 'Do what you gotta do... ' . $record["register_id"] . '<br>';
flush(); //Push to the client /ajax
ob_flush(); //As above
}

Réponse courte... OUI. Espérons que cela aide 🙂

InformationsquelleAutor Andrew Foster

Vous devez vous connecter pour publier un commentaire.