jQuery 非同期ファイル アップロード プラグイン ajaxFileUpload_jquery の詳細な紹介

1. ajaxFileUpload は、ファイルを非同期にアップロードするための jQuery プラグインです。

私が知らないバージョンをアップロードすると、今後そのバージョンをどこでも探す必要がなくなります。

構文: $.ajaxFileUpload([オプション])

オプションパラメータの説明:

1. url ハンドラーのアドレスをアップロードします。
2. fileElementId アップロードする必要があるファイルフィールドのID、つまりのID。
3. secureuri 安全な送信を有効にするかどうか。デフォルトは false です。
4. dataType サーバーから返されたデータ型。 XML、スクリプト、JSON、HTML を使用できます。入力しない場合は、jQuery が自動的に判断します。
5. success は、送信が成功した後に自動的に実行される処理関数です。パラメータ データは、サーバーから返されるデータです。
6. エラー 送信に失敗した場合に自動的に実行される処理関数です。
7. データ カスタムパラメータ。アップロードした画像に関連するデータがある場合は、こちらの方が便利です。
8、「カスタム パラメーターを送信する場合は、このパラメーターを post

に設定する必要があります」と入力します。

エラーメッセージ:

1、構文エラー: ステートメントエラーの前に欠落しています
このエラーが発生した場合は、URL パスにアクセスできるかどうかを確認する必要があります
2. SyntaxError: 構文エラー
このエラーが発生した場合は、送信操作を処理するサーバーのバックグラウンド ハンドラーに構文エラーがあるかどうかを確認する必要があります
3. SyntaxError: 無効なプロパティ ID エラー
このエラーが発生した場合は、テキスト フィールドの属性 ID が存在するかどうかを確認する必要があります
4. SyntaxError: XML 式エラー
に } がありません このエラーが発生した場合は、ファイル名が一致しているか、ファイル名が存在していないかを確認する必要があります
5. その他のカスタム エラー
変数 $error を使用して直接出力し、各パラメーターが正しいかどうかを確認できます。これは、上記の無効なエラー プロンプトよりもはるかに便利です。

使用法:

ステップ 1: まず、jQuery プラグインと ajaxFileUpload プラグインを導入します。言うまでもなく、これはすべてのプラグインに当てはまります。

コードをコピー コードは次のとおりです:

ステップ 2: HTML コード:

コードをコピー コードは次のとおりです:

ステップ 3: JS コード

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
$(":button").click(function () {
ajaxFileUpload();
})
})
関数 ajaxFileUpload() {
$.ajaxFileUpload
(
{
URL: '/upload.aspx', //ファイルアップロード用のサーバー側リクエストアドレス
secureuri: false, //セキュリティプロトコルが必要かどうか、通常は false に設定されます
fileElementId: 'file1', //ファイルアップロードドメインのID
dataType: 'json', //戻り値の型は通常 json
に設定されます Success: function (data, status) //サーバー成功応答処理 function
{
$("#img1").attr("src", data.imgurl);
If (typeof (data.error) != '未定義') {
If (data.error != '') {
アラート(data.error);
                                                                                                                                                                                                                                                                            アラート(data.msg);
} } },
error: function (data, status, e)//サーバー応答失敗処理関数
{
アラート(e);
}
}
)
return false;
}




ステップ 4: バックエンド ページの Upload.aspx コード:

コードをコピー コードは次のとおりです:

protected void Page_Load(オブジェクト送信者, EventArgs e)
        {
            HttpFileCollection ファイル = Request.Files;
            string msg = string.Empty;
            文字列エラー = string.Empty;
            文字列 imgurl;
            if (files.Count > 0)
            {
                files[0].SaveAs(Server.MapPath("/") System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功しました! 文件大小範囲:" files[0].ContentLength;
                imgurl = "/" files[0].FileName;
                string res = "{ error:'" error "', msg:'" msg "',imgurl:'" imgurl "'}";
                Response.Write(res);
                Response.End();
            }
        }

本实例完整代网下ダウンロード

来の MVC バージョンの例:

制御器代码

复制代码代码如下:

パブリック クラス HomeController : コントローラー
    {
        public ActionResult Index()
        {
            return View();
        }

public ActionResult Upload()
        {
            HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
            文字列 imgPath = "";
            if (hfc.Count > 0)
            {
                imgPath = "/testUpload" hfc[0].ファイル名;
                string PhysicalPath = Server.MapPath(imgPath);
                hfc[0].SaveAs(PhysicalPath);
            }
            return Content(imgPath);
        }
    }

フロントエンドビュー、HTML と JS 代コード、正常に転送された後、画像の真のアドレスが返され、 の SRC アドレスが返されます

复制代码代码如下:

<頭>


<スクリプトタイプ="text/javascript">
$(関数 () {
$(":button").click(function () {
If ($("#file1").val().length > 0) {
ajaxFileUpload();
}
else {
alert("写真を選択してください");
}
})
})
関数 ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/Home/Upload', //ファイルアップロード用のサーバー側リクエストアドレス
secureuri: false, //通常は false に設定されます
fileElementId: 'file1', //ファイルアップロードスペースのID属性
dataType: 'HTML', //戻り値の型は通常 json
に設定されます Success: function (data, status) //サーバー成功応答処理 function
{
アラート(データ);
$("#img1").attr("src", data);
If (typeof (data.error) != '未定義') {
If (data.error != '') {
アラート(data.error);
                                                                                                                                                                                                                                                                            アラート(data.msg);
} } },
error: function (data, status, e)//サーバー応答失敗処理関数
{
アラート(e);
}
}
)
return false;
}

最後に、パラメーターを使用して画像をアップロードする別の例を示します: コントローラー コード:

コードをコピー コードは次のとおりです:

パブリック クラス HomeController : コントローラー
{
パブリック ActionResult Index()
{
return View();
}

public ActionResult Upload()
{
NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;

HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string imgPath = "";
If (hfc.Count > 0)
{
imgPath = "/testUpload" hfc[0].ファイル名;
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
}
// 2 番目と 3 番目のパラメータを注意して書き留めてください
return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
}
}

インデックスビューコード:

コードをコピー コードは次のとおりです:

<頭>


<スクリプトタイプ="text/javascript">
$(関数 () {
$(":button").click(function () {
If ($("#file1").val().length > 0) {
ajaxFileUpload();
}
else {
alert("写真を選択してください");
}
})
})
関数 ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/Home/Upload', //ファイルアップロード用のサーバー側リクエストアドレス
タイプ: 'post',
Data: {id: '123', name: 'lunis'}, // このパラメータは非常に厳密であり、間違った引用は良くありません
secureuri: false, //通常は false に設定されます
fileElementId: 'file1', //ファイルアップロードスペースのID属性
dataType: 'json', //戻り値の型は通常 json
に設定されます Success: function (data, status) //サーバー成功応答処理 function
{
アラート(データ);
$("#img1").attr("src", data.imgPath1);
alert("要求した ID は " data.Id " " " "要求した名前は " data.name です);
If (typeof (data.error) != '未定義') {
If (data.error != '') {
アラート(data.error);
                                                                                                                                                                                                                                                                            アラート(data.msg);
}} },
error: function (data, status, e)//サーバー応答失敗処理関数
{
アラート(e);
}
}
)
return false;
}

この例では、非同期でアップロードされた画像を表示し、同時にカスタム送信パラメータをポップアップ表示します。この例

ダウンロードアドレス

2013 年 1 月 28 日、今日のデバッグ プロセス中に問題が発見されました。つまり、ファイル フィールド () に name 属性がなければなりません。 name 属性を使用すると、サーバーは Not pictured を取得します。例: 正しい書き方は

2013 年 1 月 28 日、最も典型的なエラーの原因がついに判明しました。オブジェクト関数 (a,b){return new e.fn.init(a,b,h)} にはメソッド 'handleError' がありません。これは非常に古典的なエラーです。それは私のバージョンの問題かどうかです。この問題の根本原因は、N 回のアップロード後に判明しました。答えは、dataType パラメータは大文字である必要があります。例: dataType: 'HTML'。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。