ホームページ > ウェブフロントエンド > jsチュートリアル > ajaxfileuploadの使用方法といくつかの質問について

ajaxfileuploadの使用方法といくつかの質問について

高洛峰
リリース: 2016-12-12 17:51:05
オリジナル
1542 人が閲覧しました

使用上の問題:

1.ajax-fileupload.js handleError 例外 handleError メソッドは元々 jquery メソッドでしたが、jquery は特定のバージョンに達した後にこのメソッドを削除しました

したがって、最も簡単で効果的な方法は、ajaxfileupload を使用することです。 js このメソッドを追加します。メソッドは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

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]);

        }

    },

ログイン後にコピー

2. ファイル ドメイン変更イベントをバインドし、画像を選択するたびにサーバーにアップロードし、画像のパスを返します。ブラウザに画像を表示させます。変更イベントを一度トリガーすると、次回は変更イベントがトリガーされなくなります

原因: ajaxFileUpload は元のファイル要素を新しいファイル要素に置き換えるため、以前にバインドされた変更イベントは無効になります。 {オプション}) コールバック関数で変更イベントを再バインドします。

デモを使用する

ページを表示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//绑定事件

     $("#文件上传域的ID").change(function () {

            UploadImg();

            });

  

    UploadImg = function() {    //判断内容是否为空

        if ($("#文件上传域的ID").val().length <= 0) {            return;

        };        //执行异步上传        $.ajaxFileUpload({

            url: &#39;@Url.Action("UploadHeadPhoto","UserInfo")&#39;, //用于文件上传的服务器端请求地址

            type: &#39;post&#39;,

            data: { id: $("#userId").val() },//自定义参数

            secureuri: false, //是否需要安全协议,一般设置为false

            fileElementId: &#39;文件上传域的ID&#39;, //文件上传域的ID

            dataType: &#39;json&#39;, //返回值类型 一般设置为json

            success: function(data) //服务器成功响应处理函数            {                //由于ajaxFileUpload把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了,需要重新绑定一下

                $("#文件上传域的ID").change(function () {

                    UploadImg();

                });        //Do something....            }

        });

    };

ログイン後にコピー

Controller: フロントエンドはjson形式のデータを返す必要があるため、ここでjson形式のデータを返す必要がありますが、ajaxFileUploadではjsonデータが文字列である必要があるため、return Json()ここでは使用できません。Newtonsoft.Json のメソッドを使用して json 形式の文字列にシリアル化する必要があります

1

2

3

4

5

6

7

public ActionResult UploadHeadPhoto(HttpPostedFileBase uHeadPhoto,int id)

   {            if (uHeadPhoto == null)

           {                return Content(JsonConvert.SerializeObject(new { status = "no", msg = "上传头像不能为空" }));

           }       /* 判断文件格式代码省略.....*/

      uHeadPhoto.SaveAs(Request.MapPath("/HeadPhoto/1.jpg"));   

 

   }

ログイン後にコピー


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