ajaxfileuploadの使用方法といくつかの質問について
使用上の問題:
1.ajax-fileupload.js handleError 例外 handleError メソッドは元々 jquery メソッドでしたが、jquery は特定のバージョンに達した後にこのメソッドを削除しました
したがって、最も簡単で効果的な方法は、ajaxfileupload を使用することです。 js このメソッドを追加します。メソッドは次のとおりです:
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 は元のファイル要素を新しいファイル要素に置き換えるため、以前にバインドされた変更イベントは無効になります。 {オプション}) コールバック関数で変更イベントを再バインドします。
デモを使用する
ページを表示:
//绑定事件 $("#文件上传域的ID").change(function () { UploadImg(); }); UploadImg = function() { //判断内容是否为空 if ($("#文件上传域的ID").val().length <= 0) { return; }; //执行异步上传 $.ajaxFileUpload({ url: '@Url.Action("UploadHeadPhoto","UserInfo")', //用于文件上传的服务器端请求地址 type: 'post', data: { id: $("#userId").val() },//自定义参数 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: '文件上传域的ID', //文件上传域的ID dataType: 'json', //返回值类型 一般设置为json success: function(data) //服务器成功响应处理函数 { //由于ajaxFileUpload把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了,需要重新绑定一下 $("#文件上传域的ID").change(function () { UploadImg(); }); //Do something.... } }); };
Controller: フロントエンドはjson形式のデータを返す必要があるため、ここでjson形式のデータを返す必要がありますが、ajaxFileUploadではjsonデータが文字列である必要があるため、return Json()ここでは使用できません。Newtonsoft.Json のメソッドを使用して json 形式の文字列にシリアル化する必要があります
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")); }

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル(ES6によって導入)とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull
