Explication détaillée de Thinkphp combinée avec ajaxFileUpload pour implémenter un exemple de code de transmission d'image asynchrone

Cet article présente principalement la méthode d'utilisation de Thinkphp combinée avec ajaxFichierTélécharger pour réaliser une transmission d'image asynchrone. L'article donne un exemple de code détaillé, qui a une certaine valeur de référence pour tous les amis qui en ont besoin. un regard ensemble ci-dessous.

Avant-propos

Avant de réaliser ce projet, le traitement du téléchargement d'images a toujours consisté à utiliser directement la soumission de formulaire pour le transfert de fichiers. Cette fois, en raison de la demande, il est nécessaire de le mettre en œuvre. La transmission asynchrone des images n'est pas difficile à mettre en œuvre. Après tout, il y a trop de plug-ins maintenant, mais cela fait quand même perdre beaucoup de temps de débogage. La raison en est que le plug-in ajaxfileupload des temps anciens a été utilisé et qu'il y a des erreurs. ont été signalés fréquemment lorsque j'ai commencé à l'utiliser. Le gestionnaire n'est pas une fonction.

Le cœur lourd, j'ai cherché Baidu et j'ai trouvé la réponse. Je n'ai pas pu m'empêcher de penser que le moteur de recherche index est vraiment puissant.

Solution

La raison de l'erreur ci-dessus est que jquery n'a plus utilisé la méthode du gestionnaire depuis la version 1.9.0. inconnu, vous ne pouvez donc ajouter manuellement le code que dans le jQuery.extend({ téléchargé :

handleError: function( s, xhr, status, e ){
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}

// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}

, continuer le débogage

$.ajaxfileupload({

　　url : '',

　　secureuri : '',

　　fileElementId : '', --> 这里填的是 input file的ID

　　data : {},

　　dataType : 'json',

　　complete : function(data){}　

})

Le code ne signalait plus d'erreurs, mais il y avait un nouveau problème. Les données renvoyées étaient toujours indéfinies. Ensuite, j'ai vérifié l'outil de débogage et j'ai constaté que la valeur de retour existait et que le format était correct. Je n'ai pas compris, j'y suis retourné. ........... Baidu,

a ensuite fait deux ajustements :

1, ajaxfileupload Remplacer eval('data = '   data) ;  dans .js par data = jQuery.parseJSON(jQuery(data).text());

2, remplacez la méthode complète par success

ok, et les données renvoyées par le backend peuvent être imprimées.

Résumé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!