5

私は Laravel 3 を使用しており、ユーザー コメントで AJAXing を行っています。このコメントに画像を追加していますが、ファイル データを取得できないようです。processData を false に設定すると、コメントやプライバシーなどの他のデータにもアクセスできなくなります。洞察はありますか？

var commentforms = $('form.compose');
commentforms.on('submit', function(e){
  e.preventDefault();

  var file = document.getElementById('file_input').files[0];

  $.ajax({
    type: 'POST',
    url: '/issue/comment/' + issue_id,
    processData: false,
    data: {
      side: side,
      comment: comment,
      privacy: privacy,
      file: file,
    },
    success: function(response){
      console.log(response);
      new_comment = comment_template(response);
      updateSide(new_comment);
    },
});
4

2 に答える 2

6

Kevin B がコメントしたことから外れて、これを行うにはいくつかの方法があります。

まず、機能しない理由は、デフォルトでは AJAX リクエストでファイルを送信できないためです。それがそれであり、それが機能していない理由です。フォームと AJAX リクエストに何をしても、行き詰まります。(ここでは AJAX はXMLHttpRequest2ではないことを意味します)

解決策 1

Kevin BformDataは、XMLHttpRequest レベル 2 の一部である Javascript オブジェクトを推奨しました。使用方法に関する情報は、https ://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects にあります。コード、次の行に沿ってコードを実行します。

commentforms.on('submit', function(e){
  e.preventDefault();

  var oData = new FormData(document.forms.namedItem("composeForm"));

  var oReq = new XMLHttpRequest();
  oReq.open("POST", '/issue/comment/' + issue_id, true); 
  //on a side note, issue_id isn't declared anywhere...
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      console.log("Uploaded!");
    } else {
      console.log("Error " + oReq.status + " occurred uploading your file.");
    }
  };
  oReq.send(oData);
});

問題

繰り返しますが、Kevin B が言ったように、広くサポートされているわけではありません。ここで確認してください: http://caniuse.com/xhr2 IE9 以下がサポートされていないことがわかります。これは、XP、Vista、およびアップグレードされていない Windows 7 です。アプリが独自の制御されたネットワーク上にあり、全員が Firefox/Chrome/IE10+ を使用していることを確認してください。この機能を一般ユーザーに使用する場合は、別のソリューションが必要です。

その他のソリューション

現在、多くのサイトが AJAX を使用してファイルをアップロードしたり、ユーザーをだまして AJAX であると思わせたりしています。他の Web サイトが行うことは、非表示の iFrame または Flash のいずれかです。

隠された iFrame のトリックは、現在のフォームのデータを入力する iframe を作成し、通常のように送信することです。つまり、ページのリロードを意味します。これは iFrame 内にあり、非表示になっているため、ページがリロードされるのをユーザーが見ることはなく、コンテンツは期待どおりにアップロードされます。

Flash のトリックは、ファイルを見つけてサーバーに送信する小さな Flash アプリ/プラグインを使用することです。使い方はかなり簡単で、Flash は広くサポートされているため、ほとんどのブラウザで問題なく動作します。プラグインを含めるだけで、準備完了です。

プラグイン

面倒な作業はすべてプラグインがやってくれるので、プラグインを使用することを好みます。そのシンプルさから私が今気に入っているのはFine Uploaderです。構成が簡単で、見栄えがよく、ブートストラップ可能で、jQuery で使用できます。プラグインは、1 つまたは両方の方法を使用してファイルをアップロードすることも、最初に XMLHttpRequest2 を試行してから、他の方法のいずれかにフォールバックしてファイルをアップロードすることもできます。最終的に、人気のあるプラグインのほとんどは設定が簡単で、必要な機能を実現するための適切なドキュメントを提供します。

その他の一般的なプラグイン:

アップロードする

ブルーインプ

プルロード

于 2013-09-25T19:48:12.477 に答える
2

これを読む：

XHR2では、AJAX によるファイルのアップロードがサポートされています。たとえば、 FormDataオブジェクトを使用しますが、残念ながらすべての/古いブラウザーではサポートされていません。

これを試してください：

  1. チュートリアル

そして、このコードを見てください：

var data= new FormData();
data.append( 'file', $('#file') );
$.ajax({
  url: 'file.php',
  data: data,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(response){
    console.log(response);
  }
});

スエルテ！

于 2013-09-25T19:59:01.420 に答える