jQuery 非同期ファイルアップロードプラグイン ajaxFileUpload_jquery の詳細な紹介-jsチュートリアル-php.cn

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'。