2

JavaScript を使用して Request.Files にファイルを追加する方法がよくわかりません。ここに私が行くものがあります...

var x = $('input[type=file]:eq(0)');

//Add the data to the hidden field
hiddenField.val(x.val());

//Add the html display
fileDisplayDiv.innerHTML += "<a href='#' class='filename'>display name</a>";

//Add this file to request.files
How to do???

//Clear the input so the user may add more files before postback.
x.val("");

入力は通常の HTML 入力です。はい、最終的には複数ファイルのアップロードを開発しようとしています (これが入力フィールドをクリアしている理由です) - サードパーティのものを見ましたが、私がやっていることにはカスタム機能が必要です。このタスクは可能であるように思われますが、それ以外の場合、ajax アップローダーはどのように機能しますか?

事前に感謝します。

4

2 に答える 2

1

よく使うHTML5以前のメソッドを提供します。これにはいくつかの欠点がありますが、多くの利点があります。主なものは、ほぼ完全にクロスブラウザーであるということです（唯一の要件はJavaScriptと非表示のIFRAMEです）。

すぐに欠点をリストして、発生する可能性のある問題を正確に把握できるようにします。

  • 別のドメインに投稿している場合、そのドメインからの返品を受け取ることはできません
  • コンテンツ以外のものを取得することはできません。HTTPエラーが発生すると、サイレントに失敗します。
  • 失敗した場合は、フォームを再生成する必要があります。その場合、ユーザーのファイルを自動的に再選択することはできません。

解決策：入力type = "file"をわかりやすいIFRAMEに入れ、これを使用して送信します。これはAJAXではなく、かなり古い方法ですが、機能します。

方法

手順1.IFRAMEを作成し、効率的に選択できるようにIDまたはクラスを指定します。準備が整ったものを乱雑にするのではなく、DOMReadyで作成します。作成するときに、を使用してロードイベントを割り当てます$('#yourIframe').load(function() { });。これがトリガーされると、iframeにコンテンツを追加できるようになります。秘訣は、すべてのフォーム要素をそれにコピーし、「クローン」を残して、すべての有用なイベントをIFRAME内のイベントにバインドすることです。順番に：

  • click()change()input type = "file"の場合、input type = "text"を選択し、
  • change()他の何かのために

クリックイベントは、IFRAMEの要素に転送するだけです。イベントはchange()、IFRAME内の要素にバインドされると、ファイルの名前を回復することができます。

ファントム送信ボタンをクリックしたら、load()イベントをIFRAMEにバインドしてから、IFRAME内でフォームを送信します。フォームが送信されると、$（ "body"、$（this）.contents（））を使用してロードハンドラー内のiframeのコンテンツにアクセスできるようになります。

説明のために小さなフィドルを書きました：http：//jsfiddle.net/WQhnM/2/。JSFiddle.netがデータを取得し（したがって、深刻なものや犯罪的なものを送信しないでください;-)）、サーバーが100kbを超えるものを拒否する（したがって、小さいものを送信する）ことに注意してください。しかし、アイデアはそこにあります。IFRAMEを表示したままにして、何が起こるかを確認できるようにしました。

これはかなりの解決策ではありませんが、IEがHTML5に追いつくまで機能します。

編集：私は言及するのを忘れました-これはIE7で動作するためにハックが必要です。change()この特定のブラウザでは正しくトリガーされません。ソリューション：

if (!$.browser.msie) {
  nItem.change(function() { ... });
}
else {
   nItem.click(function() { 
      setTimeout(function() {
          (function() { ... });
      },0);
   });
}
于 2012-11-26T20:54:24.687 に答える
1

古いブラウザをサポートする必要がありますか?

従来、純粋な javascript/ajax を使用してファイルをアップロードする方法はありませんでした。セキュリティ上の理由から、コントロールへの JavaScript アクセス<input type="file" />は制限されていました (そうしないと、ブラウザーをだましてユーザーのコンピューターに任意のファイルをアップロードさせる可能性があります)。サードパーティのアップロード コントロールでは、フラッシュを使用してこれらの制限を回避していましたが、古いブラウザーをサポートする必要がある場合、これが唯一の現実的なソリューションです。

HTML5 は、目的を達成するのに役立つ 2 つの新機能を提供します。

  • ファイル API : 複数のファイルの選択、選択したファイルの一覧表示、ファイル情報の表示 (すべてクライアント側) など、多くの優れた機能をネイティブに実行できます。
  • AJAX でファイルをアップロードします。XMLHttpRequest オブジェクトを純粋に使用して、ファイルまたは任意の BLOB データをサーバーに送り返すことができるようになりました。

私はまだ後者を試していませんが、ASP.NET のオブジェクトを使用してアップロードされたファイルにアクセスできるはずですRequest.Files[](試したらお知らせください!)。これらの機能は普遍的にサポートされているわけではなく、最も重要なのは、IE 8/9 が上記のほとんどをサポートしていないことです。したがって、これらのブラウザーをサポートする必要がある場合は、サードパーティのアップロード コントロールのいずれかを使用するのが最善の策です。

于 2012-11-26T20:25:22.370 に答える