ホームページ >ウェブフロントエンド >jsチュートリアル >ajaxfileupload プラグインを使用して、refreshing_javascript スキルなしでファイルのアップロードを実現する具体的な方法

ajaxfileupload プラグインを使用して、refreshing_javascript スキルなしでファイルのアップロードを実現する具体的な方法

WBOY
WBOYオリジナル
2016-05-16 17:32:241436ブラウズ

プロジェクトで作業しているときに、通常の ASP.NET FileUpload コントロールを使用してファイルをアップロードすると、ページが更新され、ページ上の JS で記述された要素が消えてしまいます。ファイルをアップロードすると、ページを更新できません。ajaxfileupload プラグインを使用することをお勧めします (プラグインのダウンロード アドレス: http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js)

ajaxfileupload は jQuery のプラグインです。このプラグインを使用する場合は、jQuery.js ファイルも参照する必要があります

コードにアクセスするだけです

JS コード

[javascript]

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

//実行ファイルをアップロードする AJAX
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: ' json',
成功: 関数 (データ, ステータス) {
アラート(データ[0])
}
; //AJAX を実行してファイルをアップロードします

$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
success: function (data, status) {
alert(data[0]);
}
});

説明:
1. このメソッドはよく知られている $.ajax メソッドと非常に似ています

2. パラメータの説明

url: AJAX バックグラウンド コード ファイル。フロント デスクからファイル データを受信する必要があります。

secureuri: アップロードされたファイルを暗号化するかどうか

fileElementId: HTML の アップロード コントロールの ID 値。ここで、バックグラウンド コードは名前と値の形式でデータを受け取ることに注意してください。 ID ではなくデータを受信します (基本的な理由は、このメソッドが自動的にフォームを生成し、そのフォームをバックグラウンド コードに送信して処理するためです)。

dataType: データ型、通常は「json」

成功: アップロード成功後にコールバック関数が実行されました

ASP.NET 一般ハンドラーのコード

[csharp]


コードをコピー コードは次のとおりです:
public void ProcessRequest (HttpContext context ) {
context.Response.ContentType = "text/html";//これは非常に重要です。フロントエンドのデータ型は json ですが、ここには html を記述する必要があります。
// ファイルを取得します。フロントエンドから
HttpFileCollection files = HttpContext.Current.Request.Files;
// Web サイトのディレクトリにファイルを保存します
files[0].SaveAs(context.Server.MapPath("/Web /uploadFiles/Achievements.xls") );
//json データ形式で表現されたプロンプトを返します
string result = "[" """ "スコアは正常にインポートされました" """ "]";
context .Response.Write(結果)

}
public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/html";//これは非常に重要です。フロントエンドのデータ型は json ですが、ここには html を記述する必要があります。
// フロントからファイルを取得します
HttpFileCollection files = HttpContext.Current.Request.Files;
// Web サイトのディレクトリにファイルを保存します
files[0].SaveAs(context.Server.MapPath ("/Web/uploadFiles/Achievements.xls"));
//json データ形式で表現されたプロンプトを返します
string result = "[" """ "Achievements imported fully" """ "]";
context.Response.Write(result);

}

これは AJAX アップロード ファイルを実装しており、ページは更新されません。必要に応じて試してみてください。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。