输入文件通过ajax发送的动态表单

时间:2019-12-19 04:42:46

标签: javascript json ajax

我知道有两种发送文件的方法,一种是通过FileReader,另一种是通过FormData 但是我不知道从哪里开始,我想为FileReader做它,你能指导我.. 考虑到可以加载一行或多行,如何通过ajax发送base64字符串

  <body>
    <h1>Hello, world!</h1>
    <form method="POST">
    <table class="table">
  <thead>
    <tr>
      <th scope="col">Acciones</th>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Foto</th>
    </tr>
  </thead>
  <tbody id="campos">

  </tbody>
  </table>
<button id="mas" type="button" class="btn btn-outline-info" onclick="agrega();">+</button>

    <center><div class="container">
    <input type="submit" class="btn btn-outline-success" name="subir" id="upload" onclick="enviar(); return false;" >
    </div></center>
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
  nrow=0;
  function agrega(){
      nrow++;
      console.log(nrow);
      console.log("Ingresaras un nuevo elemento")
      $("#campos").append("<tr id='ag"+nrow+"'>"+
      "<th scope='row'><button class='btn btn-outline-danger' onclick='elimina();return false;' >X</button></th>"+
      "<td>"+nrow+"</td>"+
      "<td><input class='form-control' name='nombre' id='na"+nrow+"' placeholder='Ingresa tu Nombre'></td>"+
      "<td><input class='form-control' name='app' id='ap"+nrow+"' placeholder='Ingresa tu Apellido'></td>"+
      "<td><input  type="file" class='form-control' name='foto' id='foto"+nrow+"'></td>"+
      "</tr>");
  }
  function elimina(index){
      console.log("Ingresa a eliminar input");
      $("#ag"+nrow).remove();
      nrow--;
      console.log(nrow);

  }
  function enviar(index){
    //console.log("Enviando inputs...");
    for(a=1;a<=nrow;a++){
        if($("#na"+a).val() ==""){
          console.log("Favor de llenar el campo"+a+" de nombre");
        }else if($("#ap"+a).val() ==""){
          console.log("Favor de llenar el campo"+a+" de apellido");
        }else if($("#ed"+a).val()==""){
          console.log("Favor de llenar el campo"+a+" de edad");
        }
          else{


        }
    }

  }
  </script>

0 个答案:

没有答案