簡単なjquery-ajaxコールを使用してファイルをアップロードする方法

クライアントサイドスクリプトを検索して、ajaxを使用してファイルをアップロードしています。このスクリプトのWebを検索すると、複数の機能を備えた多くのプラグインが作成されました。私は、マルチfeautresは必要ありません - ちょうどAJAX簡単なjquery-ajaxコールを使用してファイルをアップロードする方法

を使用して、可能な限りシンプルにそれをアップロードできるようにすることのような単純な何かを書くすることが可能です：それは可能である場合

$.get('server/upload.php?file = ' + $('#uploadInput').val(), function(data) { 
    $('.result').html(data);  
});

- どのように私はすべきそれを正しく書いてください（$('#uploadInput').val()は正しいディレクトリパスを与えませんので、Ajaxを使って場所を渡すために何が必要ですか）。それはさておき

- ファイルのドラッグ&ドロップを得るために - そのための簡単なスクリプトはありますか私はプラグインを使用する必要があります（と多機能のない本当に小さなと単純なものがある）ん

出典

2012-02-28 Alon

「シンプル」、「アヤックス」、「アップロード」という言葉はよく一緒になる言葉ではありません。私は恐れています。それをやるのは簡単な方法ではありません。 – BenOfTheNorth

File APIなどのHTML5機能を使用してこれを実現できます（例：この記事のユーザー選択ファイルのアップロードを参照してください）。

しかし、クロスブラウザのソリューションが必要な場合は、クライアント側のアップロードプラグインを使用することをお勧めします。たとえば、jQuery formプラグインはセットアップが非常に簡単です。 Valums Ajax uploadも非常にいいです。それはドラッグアンドドロップやアップロードの進行など多くの機能を提供しますが、気にしなければ簡単にオフにすることができます。

出典

2012-02-28 09:07:57

なぜ簡単ではないのか分かりません。私はそれをPHPファイルを使用して行うことができます。だから私は同じPHPファイルでそれを行うことはできませんが、パラメータを送信するajax呼び出しでそれを行うことはできません？ – Alon

@ Alonサーバーにファイルをアップロードするには、そのコンテンツにアクセスできる必要があるためです。また、非常に明白な理由から、javascriptを使用してクライアントコンピュータ上のファイルコンテンツにアクセスすることはできません。実際には、HTML5 File APIを使用すると、ユーザーが既にファイル入力内のファイルを選択したと仮定して、これを行うことができます。また、私はこの作業のために設計されたプラグインを使用するのに複雑なものは見当たりません。 –

現代のブラウザでは、新しいxhr2（http://www.html5rocks.com/en/tutorials/file/xhr2/を参照）を使用して、進捗バーを含むきちんとしたAJAXファイルのアップロードを実行できます。これがすでに最新のjQueryに組み込まれているかどうかはわかりません。たぶん、誰かがそのことについて何か光を当てることができます。

出典

2012-02-28 09:20:04 devnull69

AJAXを使用してファイルをアップロードすることはできません（クライアントブラウザがHTMLオブジェクトをサポートしていない限り、ファイルオブジェクトにアクセスできません）。

あなたの解決策は、それが

私たちは、「results_frame」のフレームの目標を設定

<form id="myForm" action="upload.php" method="POST" target="results_frame"> 
    <input name="fileUpload" type="file" /> 
    <input type="submit" value="Submit" /> 
</form>

フォーム要素を作成し、我々はHTMLのフォームの後にそれを定義します偽物にあります空のiframeとして

<iframe id="results_frame" name="results_frame" style="display:none;"></iframe>

次に、あなたのようにファイルをキャプチャすることができ、あなたのPHPファイルにバックエンドで - あなたがファイルを使用して操作を完了したら

$_FILE['file']['param']; //where param accepts multiple values 
//such as name, type, size, error, and tmp_name

、あなたが好きな情報エコーを作ることができますこの時点で初期フォームをリフレッシュすることを含む。

出典

2012-02-28 09:22:08 Ohgodwhy

この問題を解決するiFrames。いいえ、単にいいえ。 – OptimusCrime

私の答えを見て、私はそれがかなり正しいと思います。あなたの答えは、それはajaxを含んでいますか？あるいは私は何かを逃している。 – OptimusCrime

私は年齢のためにこれを使用してきましたが、これは純粋なajax/jQueryではないことを再度教えてください：http://valums.com/ajax-upload/ – OptimusCrime

Uploadifyは、ajaxアップロード用の別の優れたソリューションです。その

セットアップが非常に簡単、
非常にスタイリッシュ
クロスbroswer。

あなたはすべての現代人のブラウザで動作AJAXアップローダーを作りたい場合は、あなたには、いくつかのjQueryプラグインをチェックアウトする必要がありますdemos

出典

2012-02-28 09:23:06 Starx

ダウンロードボタンはPaypalの寄付手続きにつながりますか？「ニース」！ –

@AleksandrMakov、Ohそれは以前は無料の製品でした。あなたがそれを支払わなければならないからといって、答えに私の主張を裏付けるものではありません。彼らはあなたのようなフリーローダーではなく、今すぐ寄付を受けるべきではありません。それは今何年もの間無料でした。デベロッパー – Starx

hmにいくつか敬意を払いますが、どこであなたのポイントを「反証」しましたか？ねえ、スターク、ここにあなたのビールがあります！ああ、今あなたがその冷たい瓶を持っているときに、私がそれに値する。 –

を参照してください。たとえば、http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/などの記事をご覧ください。

最初の投稿で提案した内容はうまくいかないでしょう。フォームからコンテンツを取得しても、その情報をGETに入れることはできません。 URLは最大2000文字（？）にすることができます。したがって、より大きなファイルをアップロードすると、アップロードがクラッシュする可能性があります。これをPOSTを使用して送信する必要があります。

Btw、私はこのプラグインで良い経験をしています：http://valums.com/ajax-upload/。かなりシンプルなので、好きなようにカスタマイズすることができます（いくつかの基本的なjQuery/jsエクスペリエンスで）。

希望します。

出典

2012-02-28 09:28:27 OptimusCrime

簡単なjquery-ajaxコールを使用してファイルをアップロードする方法

答えて

関連する問題