javascript - 制作一个不序列化 javascript 的一对多表单 html

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