フォームからファイルを送信するJQuery AJAX

Question

このコードは、ブラウザを更新せずに写真をアップロードする場所です。しかし、私はアップローダーファイルが気に入らなかったので、以前使っていたものを使用することにしました。問題は、javascriptファイルから文字列の代わりに配列を送信していることです（1つではなく複数のファイルを送信することを意図していました）。ここでは、配列を作るコードは次のとおりです。JavaScriptで

input.addEventListener("change", function (evt) { 
    document.getElementById("response").innerHTML = "Loading . . ." 

    var i = 0, len = this.files.length, img, reader, file; 

    for (; i < len; i++) { 
     file = this.files[i]; 
      if (formdata) { 
       formdata.append("uploaded_file[]", file); 
    } } } 

    if (formdata) { 
     $.ajax({ 
      url: "img_upload.php", 
      type: "POST", 
      data: formdata, 
      processData: false, 
      contentType: false 
     }).done(function (res) { 
          /* *** show uploaded item *** */ 
          /* *** show response *** */ 
      }); 
    } 

私の知識は本当に弱いですし、私の代わりに、配列の自身でアップロードされたファイルを送信するには、このコードを変更する方法を見つけることができません。

（send_imgはフォーム名/ IDです）私は独立してこれらを試してみましたが、それらのどれも働いた：

formdata = document.send_img.uploaded_file.value; 
formdata = document.getElementById("uploaded_file"); 
formdata = new formdata ($('#send_img')); 
formData = $('#send_img').serialize(); 
formdata.replaceWith("uploaded_file[]", file); 

私も同じキー（0）を使用するforを排除しようとしたが、それにはありませんそのように働く。 img_upload.phpのための凝縮コードは次のとおりです。

$fileName = $target . $_FILES["uploaded_file"]["name"]; 
$fileTmpLoc = $_FILES["uploaded_file"]["tmp_name"]; 
$fileName = $new_name . "." . $fileExt; 
move_uploaded_file($fileTmpLoc, "images/images/temp/$fileName"); 

どのように私はちょうど1つの文字列にアップロードされたファイル（またはヘッダーまたは何でも送信することになっている）を送信することができますと、追加された第二のファイルの場合は、配列に2番目の値を作成する代わりに最初の配列を置き換えますか？

Answer 1

問題はあなたのロジックではありません。問題は、ファイルをajax経由でアップロードできないことです。

でも、他人はどうやって質問してくれるのでしょうか？さて、フォームプラグインを試してみてください（別の.jsはjQueryで動作します）

私はこれを見つけましたが、 'submit'メソッドを使用していますが、入力を変更したり、javascriptで他の種類のソリューションを見つけることができます行動。この

チェック：http://www.miguelmanchego.com/2009/subir-archivos-usando-ajax-jquery/

サイトはスペイン語であるが、あなたが必要な場合は、英語にそれを翻訳します。またこのリンクには、ライブサンプルとソースコードのダウンロードが含まれています。

よろしくお願いいたします。

以下

Answer 2

ファイルに

method: "POST", 
     url: url, 
     headers: { 'Content-Type': undefined }, 
     transformRequest: function (data, headersGetter) { 
      var formData = new FormData(); 
      angular.forEach(data, function (value, key) { 
       if (Array.isArray(value)) { 
        // To save array of items 
        angular.forEach(value, function (value1, key1) { 
         if (value1.constructor.name != "File") { 
          angular.forEach(value1, function (value2, key2) { 
           formData.append(key + '[' + key1 + '].' + key2, value2); 
          }); 
         } 
        }); 
       } else { 
        formData.append(key, value); 
       } 
      }); 

      return formData; 
     }, 
     enctype: 'multipart/form-data', 
     dataType: 'json', 
     traditional: true, 
     data: data, 
     cache: false, 
     processData: false, 
     contentType: false 

をアップロードすることができ、私のAJAXの設定です