3

私は単一のファイルフィールドを持つフォームを持っています:

<form id="myForm" action="/processFile" method="post" enctype="multipart/form-data">
  <input type="file" name="uploadFile">
</form>

そして、AJAX経由でフォームを送信したいと思います(クライアント側でjQueryを使用し、サーバー側でNode.JSを使用します)。

これは、jQuery のクライアント側で最初に試したものです (このような質問を見た後、 jQueryで AJAX 経由でフォームを送信します):

submitButton.on('click', function(ev) {
  $.ajax({
    type: "GET",
    url: $('#myForm').action
    data: { form: $('#myForm').seralize() }
  }).done(function(res) {
    $('#targetDiv').html(res);
  });
});

残念ながら、.seralize() メソッドはファイル入力に対して機能しないため、これは機能しませんでした。

そのため、ファイルをサーバーにアップロードする際の非同期の煩わしさを処理するため、実際にフォームを投稿することが最善の方法であると判断しました。だから私はこれを試しました：

submitButton.on('click', function(ev) {
  $('#myForm').submit(function(err) {
    $.ajax({
      type: "GET",
      url: $('#myForm').action
      data: { form: $('#myForm').seralize() }
    }).done(function(res) {
      $('#targetDiv').html(res);
    });
  });
});

つまり、(1) 実際にフォームを送信し、(2) フォーム送信のコールバックで ajax 呼び出しを行います。

悲しいことに、フォームを送信すると、「/processFile」からの応答に基づいてページ全体がリロードされることが予想されるため、これも機能しません。

私が望むのは、(1) AJAX を介してできるだけ簡単にファイル入力を送信し、 (2) URL の応答を使用して部分的な HTML を挿入することです。いくつかのiFrameトリック（このhttp://www.jainaewen.com/files/javascript/jquery/iframe-post-form.htmlなど）を使用してこれをハッキングできるようですが、私がそうでないよりクリーンな方法はありますか見る？

4

2 に答える 2