以动态形式上传小图片？

Question

使用Javascript或HTML，我有一个动态表单，每次用户向表中添加数据时都会刷新/更新。它甚至有一个“修改”按钮和一个“擦除”按钮来删除该特定行。但是，我要添加的最后一件事是一个按钮，允许用户上传适合列的最后一个插槽的图片。我如何以这样一种方式实现它：每当用户“添加”该特定图像的数据（和另一行形成）时，下次他想要添加另一行时，他能够选择另一个图像？

  window.onload = load;
var id = 1;
var colEmpleados = [];
var colSectores = [{id:1, nombre:"Sector 1"}, 
                   {id:2, nombre:"Sector 2"}, 
                   {id:3, nombre:"Sector 3"}];

function load()
{
    var btnAgregar = document.getElementById("btnAgregar");
    btnAgregar.onclick = agregar;

    var btnConfirmar = document.getElementById("btnConfirmar");
    btnConfirmar.onclick = confirmarModificacion;

    var btnCancelar = document.getElementById("btnCancelar");
    btnCancelar.onclick = cancelar;


    cargarSelectSectores();
    habilitarIngreso();
}

function habilitarIngreso()
{
    var rowA = document.getElementById("rowAgregar");
    rowA.style.display = 'block';

    var rowM = document.getElementById("rowModificar");
    rowM.style.display = 'none';
}

function habilitarModificar()
{
    var rowM = document.getElementById("rowModificar");
    rowM.style.display = 'block';

    var rowA = document.getElementById("rowAgregar");
    rowA.style.display = 'none';
}

function confirmarModificacion()
{
    var idEmpleado = document.getElementById("idEmpleado").value;
    for(var i = 0; i<colEmpleados.length;i++)
    {
        if(colEmpleados[i].idEmpleado == idEmpleado)
        {
            colEmpleados[i].nombre = document.getElementById("txtNombre").value;
            colEmpleados[i].apellido = document.getElementById("txtApellido").value;
            colEmpleados[i].sector = document.getElementById("sltSector").value;
            colEmpleados[i].edad = document.getElementById("txtEdad").value;
            colEmpleados[i].ingreso = document.getElementById("dtpIngreso").value;
        }
    }

    mostrar();
    habilitarIngreso();
    limpiarForm();
}

function cancelar()
{
    habilitarIngreso();
    limpiarForm();
}

function borrar()
{
    var idEmpleado = this.getAttribute("idEmpleado");

    for(var i=0; i<colEmpleados.length; i++)
    {
        if(colEmpleados[i].idEmpleado == idEmpleado)
        {
            colEmpleados.splice(i,1);
        }
    }
    mostrar();  
}

function modificar()
{   
    habilitarModificar();
    var idEmpleado = this.getAttribute("idEmpleado");

    for(var i=0; i<colEmpleados.length; i++)
    {
        if(colEmpleados[i].idEmpleado == idEmpleado)
        {       
            document.getElementById("idEmpleado").value = colEmpleados[i].idEmpleado;
            document.getElementById("txtNombre").value = colEmpleados[i].nombre;
            document.getElementById("txtApellido").value = colEmpleados[i].apellido;
            document.getElementById("sltSector").value = colEmpleados[i].sector;
            document.getElementById("txtEdad").value= colEmpleados[i].edad;
            document.getElementById("dtpIngreso").value= colEmpleados[i].ingreso;
        }
    }
    mostrar();  
}

function cargarSelectSectores()
{
    var selectSectores = document.getElementById("sltSector");
    selectSectores.innerHTML = "<option id='0'>--- Sectores ---</option>";
    for(var i = 0; i<colSectores.length; i++)
    {
        selectSectores.innerHTML +="<option id="+colSectores[i].id+">"+colSectores[i].nombre+"</option>";
    }
    mostrar();  
}

function agregar()
{
    var nombre = document.getElementById("txtNombre").value;
    var apellido = document.getElementById("txtApellido").value;
    var sector = document.getElementById("sltSector").value;
    var edad = document.getElementById("txtEdad").value;
    var fechaIngreso = document.getElementById("dtpIngreso").value;


    var empleado = {};
    empleado.idEmpleado = id;
    empleado.nombre = nombre;
    empleado.apellido = apellido;
    empleado.sector = sector;
    empleado.edad = edad;
    empleado.ingreso = fechaIngreso;

    colEmpleados.push(empleado);
    id++;
    limpiarForm();  
    mostrar();
}

function limpiarForm()
{
    var colInputs = document.getElementsByTagName("input");

    for(var i = 0; i<colInputs.length; i++)
    {
        if(colInputs[i].type != "button")
        {
            colInputs[i].value = "";    
        }
    }
    document.getElementById("sltSector").value = "0";
}

function mostrar()
{
    var bodyTabla = document.getElementById("datosEmpleados");
    bodyTabla.innerHTML = "";
    for(var i = 0; i<colEmpleados.length; i++)
    {
        var emp = colEmpleados[i];
        bodyTabla.innerHTML +="<tr><td>"+emp.idEmpleado+"</td><td>"+emp.nombre+"</td><td>"+emp.apellido+"</td><td>"+emp.edad+"</td><td>"+emp.sector+"</td><td>"+emp.ingreso+"</td><td><input class='btnBorrar' type='button' value='Borrar' idEmpleado="+emp.idEmpleado+" /></td><td><input class='btnModificar' type='button' value='Modificar' idEmpleado="+emp.idEmpleado+" /></td></tr>";
    }



    var colBotones = document.getElementsByClassName("btnBorrar");
    for(var i = 0; i<colBotones.length; i++)
    {
        colBotones[i].onclick = borrar;
    }

    var colBotonesModificar = document.getElementsByClassName("btnModificar");
    for(var i = 0; i<colBotonesModificar.length; i++)
    {
        colBotonesModificar[i].onclick = modificar;
    }
}

提前致谢！