制作一對多形式的html而不序列化javascript

Question

我正在嘗試制作一個簡單的表格，允許在上傳之前添加多張照片。 目前，我正在使用javascript手動創建對象

var objArr = [];
for(var i = 0; i < <arrayOfInputs>.length; i++){
    objArr.push({
        img://image file
        caption://caption text
        title://image title
        tags://image tags
    });
}

然后我提交表格。 但是，有一種方法可以構造html markdown，因此具有相同的效果。

我試過了

<form>
    <fieldset name="img[]">
        <input type="file" name="img"/>
        <input type="text" name="caption"/>
        ...
    </fieldset>//repeat for each photo

這沒有理想的效果。 是否可以使用純HTML解決方案，或者我需要使用JavaScript手動序列化表單？

序列化后的對象應如下所示：（即使用mongodb，但這不會影響表單的結構）

{
    'name':'Some Name',
    'description':'Some Description',
    'images':[{
        'img':imgFile,
        'caption':'Some image',
        'title':'Some Title',
        'tags':'Some Tags'
    },{
        'img':otherimgFile,
        'caption':'Some other image',
        'title':'Some other Title',
        'tags':'Some other Tags'
    }]
}

Answer 1

您可以添加一個生成新字段集的按鈕，從而能夠在提交表單之前根據需要添加任意數量的照片。

<form>
  <fieldset name="img[]">
    <input type="file" name="img"/>
    <input type="text" name="caption"/>
    <input type="file" name="title"/>
    <input type="text" name="tags"/>
  </fieldset>
  <button id="add-photo-btn">Add another photo</button>
</form>

$('#add-photo-btn').on('click', function() {

  var myForm = $('form');
  var fieldset = '<fieldset name="img[]"><input type="file" name="img"/><input type="text" name="caption"/><input type="file" name="title"/><input type="text" name="tags"/></fieldset>';

  myForm.append(fieldset);
});