ホームページ > バックエンド開発 > PHPチュートリアル > ThinkphpとajaxFileUploadを組み合わせて非同期画像送信を実装するサンプルコードの詳細説明

ThinkphpとajaxFileUploadを組み合わせて非同期画像送信を実装するサンプルコードの詳細説明

黄舟
リリース: 2023-03-06 15:50:01
オリジナル
1880 人が閲覧しました

この記事では、主に Thinkphp と ajaxFileUpload を組み合わせて非同期画像送信を実現する方法を紹介します。この記事には詳細なサンプルコードが記載されているので、必要な方は以下を参照してください。バー。

はじめに

このプロジェクトを行う前は、画像のアップロード処理をフォーム送信によって直接行っていましたが、今回は需要により、画像の非同期送信を実装する必要があります。実装は難しくありません。今はプラグインが多すぎますが、それでもデバッグに多くの時間を費やしています。その理由は、私が使い始めた頃、頻繁にエラーを報告する ajaxfileupload プラグインを使用していたからです。は関数ではありません。

重い気持ちで Baidu を検索したところ、検索エンジン index が本当に強力であると感じずにはいられませんでした。

解決策

上記のエラーの理由は、jqueryが1.9.0以降ハンドラーメソッドを使用しなくなったためです。具体的な理由は不明なので、 jQuery.extend({ コードを手動で追加します: jQuery.extend({   里手动添加代码:


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] );
}
}
ログイン後にコピー

,继续debug


$.ajaxfileupload({

  url : '',

  secureuri : '',

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

  data : {},

  dataType : 'json',

  complete : function(data){} 

})
ログイン後にコピー

代码不在报错了,但又有新的问题,返回的数据一直是undefined,随后看了下调试工具,返回值存在,而且格式也没问题,怎么都想不明白之后,又去..................百度了,

然后做了两个调整:

1,将ajaxfileupload.js里的 eval('data = '+  data) ;  替换成 data = jQuery.parseJSON(jQuery(data).text());


rrreee

、デバッグを続行します


rrreee

コードはレポートされなくなりましたエラーが発生しましたが、新しい問題が発生しました。返されたデータは常に未定義でした。その後、デバッグ ツールを確認したところ、戻り値が存在し、形式が正しいことがわかりました。 .. ..... Baidu、

は、次の 2 つの調整を行いました:

🎜🎜1. ajaxfileupload.js の eval('data = '+ data); を <code>data = に置き換えます。 jQuery.parseJSON(jQuery(data).text());🎜🎜2、完全なメソッドを success に置き換えます🎜🎜 OK、バックエンドによって返されたデータは出力できます 🎜🎜🎜概要。

以上がThinkphpとajaxFileUploadを組み合わせて非同期画像送信を実装するサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート