使用上の問題:
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 (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
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 ;
};
url: '@Url.Action( "UploadHeadPhoto" , "UserInfo" )',
type: 'post',
data: { id: $( "#userId" ).val() },
secureuri: false,
fileElementId: '文件上传域的ID',
dataType: 'json',
success: function (data)
$( "#文件上传域的ID" ).change( function () {
UploadImg();
});
});
};
|
ログイン後にコピー
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" ));
}
|
ログイン後にコピー