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

Question

I am trying to make a simple form that allows for multiple photos to be added before upload. currently I am creating an object manually with 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
    });
}

and then I submit the form. however is there a way to structure the html markdown so It will have the same effect.

I tried

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

This does not have the desired effect. Is a pure html solution possible or do I need to use javascript to serialize a form manually?

after serialization object should look something like this:(im using mongodb but that shouldn't effect the structure of the form)

{
    '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

You can add a button that spawns a new fieldset, thus being able to add as many photos as you want before submitting the form.

<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);
});