ホームページ > 記事 > ウェブフロントエンド > シンプルな jQuery プラグイン ajaxfileupload.js は、Ajax アップロード ファイル example_jquery を実装します。
jQuery プラグイン AjaxFileUpload は、Ajax ファイルのアップロードを実現できます。このプラグインは非常に簡単に使用できます。まず、AjaxFileUpload プラグインの正しい使用方法を学び、次に、いくつかの一般的なエラー メッセージと解決策について学びます。
使用説明書
jQuery ライブラリ ファイルと AjaxFileUpload ライブラリ ファイルを使用する必要があります
使用例
1、ファイル部分
を含む2. HTML 部分
81fdc12b3e5a7c94f0fb7543d39812ad
AjaxFileUpload プラグインがフォーム送信フォームを自動的に生成するためです。
ファイルのドメイン ID と名前については、ajaxFileUpload プラグインの fileElementId パラメーターでファイル ドメイン ID を取得する必要があります。ファイルのアップロード操作を処理する場合は、ファイル ドメイン名を取得する必要があります。アップロードされたファイル情報は明確でなければなりません。
3、JavaScript 部分
<script type="text/javascript"> function ajaxFileUpload (){ loading();//动态加载小图标 $.ajaxFileUpload ({ url :'upload.php', secureuri :false, fileElementId :'fileToUpload', dataType : 'json', success : function (data, status){ if(typeof(data.error) != 'undefined'){ if(data.error != ''){ alert(data.error); }else{ alert(data.msg); } } }, error: function (data, status, e){ alert(e); } }) return false; } function loading (){ $("#loading ").ajaxStart(function(){ $(this).show(); }).ajaxComplete(function(){ $(this).hide(); }); } </script>1. url は、ファイルのアップロード操作を処理するためのファイル パスを表します。上記のように、URL がブラウザで直接アクセスできるかどうかをテストできます。 2. fileElementId は、上記のようにファイル ドメイン ID を表します: fileToUpload
4. dataType データ、通常は JavaScript の本来の生態である json を選択します
5. 送信成功後の処理機能
6. エラー送信失敗処理関数
上記には 2 つのメソッドがあります。動的読み込みの小さなアイコン プロンプト関数のloading() と、使用する jQuery.ajax() 関数に似た ajaxFileUpload ファイルのアップロード $.ajaxFileUpload() 関数です。使い方は非常に簡単です。ここでは省略しましたが、PHP はアップロードされたファイルを処理します。jQuery プラグイン AjaxFileUpload を使用して ajax ファイルを実装するのはとても簡単です。
同時に、関連するエラー プロンプトを知る必要があります
1、構文エラー: ステートメントエラーの前に欠落しています
このエラーが発生した場合は、URL パスにアクセスできるかどうかを確認する必要があります2、SyntaxError: 構文エラー
このエラーが発生した場合は、送信操作を処理する PHP ファイルに構文エラーがあるかどうかを確認する必要があります
このエラーが発生した場合は、属性 ID が存在するかどうかを確認する必要があります
このエラーが発生した場合は、ファイルのドメイン名が一致しているか、存在していないかを確認する必要があります
変数 $error を使用して直接出力し、各パラメーターが正しいかどうかを確認できます。これは、上記の無効なエラー プロンプトよりもはるかに便利です。
処理中のページ:
using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class web_ajax_FileUpload : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { HttpFileCollection files = HttpContext.Current.Request.Files; //if (files[0].ContentLength > 5) //{ // Response.Write("{"); // Response.Write("msg:'" + files[0].FileName + "',"); // Response.Write("error:'文件上传失败'"); // Response.Write("}"); //} //else //{ // Response.Write("{"); // Response.Write("msg:'没有文件被上传',"); // Response.Write("error:'文件上传失败'"); // Response.Write("}"); //} files[0].SaveAs("d:/adw.jpg"); Response.Write("{"); Response.Write("msg:'a',"); Response.Write("error:''"); Response.Write("}"); //Response.Write("{"); //Response.Write("msg:'ggg\n',"); //Response.Write("error:'aa\n'"); //Response.Write("}"); Response.End(); } }
ページコード:
コードをコピー