html表單|| formdata || AJAX

起點：我有這樣多種形式網站：html表單|| formdata || AJAX

<form class="form card-content-ingredients" action="" id="form-id-0" enctype="multipart/form-data"> 
      <ul> 
       <li class="form__item"> 
       <label class="form__label" for="name">Text</label> 
       <input class="form__input form__input--textfield" type="text" name="description" value="" placeholder="description"> 
       </li> 
       <li class="form__item"> 
       <label class="btn btn--invalid" for="file" >picture</label> 
       <input class="form__input form__input--file" id="file" type="file" name="img" value="picture"> 
       </li> 
       <ul class="form__item--multi-align-right"> 
       <li> 
        <input class="btn btn--invalid" type="button" value="cancel"> 
       </li> 
       <li> 
        <input class="btn btn--invalid btn__save" type="button" value="Save" data-item-id="0" data-rqstPath="/xyz"> 
       </li> 
       </ul> 
      </ul> 
      </form>

當我點擊保存AJAX請求傳輸的所有數據在FORMDATA接口包括文件而成。

我的問題是：只有來自第一個表單元素的文件正在傳輸。對於所有其他形式，文件輸入字段不包括在我點擊保存時，但奇怪的是所有其他輸入字段。當我改變表格的順序時，它仍然具有相同的效果。我只用一個JS函數處理的FORMDATA，它看起來像這樣：

function updateSettingsAJAX(itemID, rqstPath) { 

     if (!(typeof itemID !== typeof undefined && itemID !== false) || 
      !(typeof rqstPath !== typeof undefined && rqstPath !== false)) { 
      return false; 
     } 

     var formData = new FormData($('#form-id-' + itemID)[0]); 


     formData.append("itemID", itemID); 

     return $.ajax({ 
      type: "POST", 
      url: rqstPath, 
      data: formData, 
      processData: false, 
      contentType: false, 
     });

如果有人能幫助我與我的問題，我將非常感激。

來源

2017-01-03 ArtemisUser

你對這些文件輸入重複的ID的？他們都是'檔案'嗎？ – Tom

試試這個： http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax – gmdev86

謝謝你@thebluefox，解決了我的問題！ – ArtemisUser

-1

這是你的代碼，有一些修正（在表格新聞中心的ID），它工作正常：我的建議後 https://jsfiddle.net/sk5j8qds/

<form class="form card-content-ingredients" action="" id="form-id-0" enctype="multipart/form-data"> 
<ul> 
    <li class="form__item"> 
     <label class="form__label">Text</label> 
     <input class="form__input form__input--textfield" type="text" name="description" value="" placeholder="description"> 
    </li> 
    <li class="form__item"> 
     <label class="btn btn--invalid" for="file_0" >picture</label> 
     <input class="form__input form__input--file" id="file_0" type="file" name="img" value="picture"> 
    </li> 
    <ul class="form__item--multi-align-right"> 
     <li> 
      <input class="btn btn--invalid" type="button" value="cancel"> 
     </li> 
     <li> 
      <input class="btn btn--invalid btn__save" type="button" value="Save" data-item-id="0" data-rqstpath="/echo/html/"> 
     </li> 
    </ul> 
</ul>

<form class="form card-content-ingredients" action="" id="form-id-1" enctype="multipart/form-data"> 
    <ul> 
     <li class="form__item"> 
      <label class="form__label">Text</label> 
      <input class="form__input form__input--textfield" type="text" name="description" value="" placeholder="description"> 
     </li> 
     <li class="form__item"> 
      <label class="btn btn--invalid" for="file_1" >picture</label> 
      <input class="form__input form__input--file" id="file_1" type="file" name="img" value="picture"> 
     </li> 
     <ul class="form__item--multi-align-right"> 
      <li> 
       <input class="btn btn--invalid" type="button" value="cancel"> 
      </li> 
      <li> 
       <input class="btn btn--invalid btn__save" type="button" value="Save" data-item-id="1" data-rqstPath="/echo/html/"> 
      </li> 
     </ul> 
    </ul> 
</form> 
<script> 
function updateSettingsAJAX(itemID, rqstPath) { 
     if (!(typeof itemID !== typeof undefined && itemID !== false) || !(typeof rqstPath !== typeof undefined && rqstPath !== false)) { 
      return false; 
     } 

     var formData = new FormData($('#form-id-' + itemID)[0]); 


     formData.append("itemID", itemID); 

     return $.ajax({ 
      type: "POST", 
      url: rqstPath, 
      data: formData, 
      processData: false, 
      contentType: false, 
     }); 
    } 

    $(function() { 
     $('.btn__save').on('click', function() { 
      return updateSettingsAJAX($(this).data('item-id'),$(this).data('rqstpath')); 
     }); 
    }); 
</script>

來源

2017-01-03 16:48:36 wolfEg

您應該提供更多關於您的更改的詳細信息，這將有助於@ArtemisUser查看您的答案 –

發帖代表OP的註釋;

文件<input>上的重複ID導致標籤的觸發輸入字段始終觸發第一個字段的問題。

順便說一句 - 這是一箇舊的標準，但一個仍然值得adhearing到 - ID's must be unique

來源

2017-01-03 17:09:21 Tom

html表單|| formdata || AJAX

回答

相關問題