web-dev-qa-db-ja.com

Ajaxを使用してファイルのアップロードを行うことは可能ですか?

JQueryは使いたくないのですが、Ajaxを使ってファイルをアップロードしたいと思います。それは可能ですか?

もしそうなら、どこで情報/チュートリアルを見つけることができますか?

26
johnnietheblack

いいえ、JavaScriptでこれを行うことはできません。

ただし、「AJAX」の感覚を与えるために、フォームを非表示のiframeに送信し、スクリプトの結果を出力して、そこから処理することができます。 Google ajax iframe upload そしてそこから始めましょう。

JQueryを使用している場合は、 Form plugin フォームにファイルフィールドが含まれている場合、このiframeが自動的に作成されます。私はこれを行うためにそれを使用していませんが、私は良いことを聞いています。

コメントで指摘されているように、非常に人気のある SWFUpload のようなものを使用して、Flashで目的の効果を実現することもできます。

39

誰かがこの質問をずっと後で見つけた場合:はい、これはJavaScriptで可能になりました。

HTML5は、これを実現するために一緒に使用する2つの新しいAPIを定義しました。ドラッグアンドドロップAPIとファイルAPIです。 jQueryを使用してAPIと対話し、アップロードするファイルを効果的にドラッグアンドドロップできます。

これが チュートリアル それを行う方法についてです。

コードは現在Chrome 6以降およびFirefox3.6以降、Safari6およびIE 10. Safari 5のサポートが必要な場合、コードはほぼ正確に維持されます。同じですが、アップロードされたファイルリストの代わりにFormDataオブジェクトを使用します(詳細については、投稿を参照してください)。

Operaは11の時点でファイルAPIをサポートしていますが、DnD APIはサポートしていません。ドロップ操作はアップロードを開始しませんが、APIを使用してファイルにアクセスすることはサポートしています。私は12年に彼らがDnDAPIのサポートを終了すると想像しています。

01-20-14更新:すべての主要なブラウザーがすべての標準APIを実装するようになったため、このチュートリアルはすべてのブラウザーで機能します。

31
Riyad Kalla

私は swfupload を複数のajaxのようなアップロードに使用します(そのjavascript/flashベース)

2
Luis Melgratti

Iframeを使用してGmailがどのようにそれを行うかについての詳細は次のとおりです。

http://www.sajithmr.com/upload-files-like-gmail/

1
Chad Birch

Javaを使用していると仮定すると、DWRバージョン3.0(現在RC1)はバイナリファイルのアップロード/ダウンロードをサポートしているため、問題は簡単になります。これを試す機会はまだありませんが、DWRを幅広く使用して完全に成功しています。それは素晴らしいAjaxツールキットです。

http://directwebremoting.org/blog/joe/2008/12/16/dwr_version_3_0_release_candidate_1.html

1
Peter

厳密に言えば、実行する可能性があります real AJAX file uploads ですが、これはFirefox 3以降、Safari 4、およびChrome = 2.他のすべてのブラウザでは、iframeテクニックやFlashベースのアップローダーなどの回避策を使用する必要があります。

1
Ionuț G. Stan

個人的には使用していませんが、 Ajax Uploader は最近出会ったコンポーネントで、UpdatePanel内でファイルのアップロードを実行できると言っています(ASP.NETを使用していると仮定)。

0
Mun