JavaScript - ¿Como enviar enctype-multipart/form-data a través de jquery?

   
Vista:

¿Como enviar enctype-multipart/form-data a través de jquery?

Publicado por Jorge (2 intervenciones) el 16/05/2017 22:40:21
Hola una consulta, he estado dando mucha vuelta a este tema pero no lo solucionarlo.
Pasa que tengo el siguiente código.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
function goReg_Event(){
 var connect, form, response, result,titulo, descripcion,img;
 
titulo = __('titulo').value;
descripcion = __('descripcion').value;
 
img = document.getElementsByName('img').value;
 
 
    if(titulo != '' && descripcion != ''){
      if(coords1 && coords2 != ''){
        if(img != ''){
          form = 'titulo=' + titulo + '&descripcion=' + descripcion + '&img=' + img;
          connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
          connect.onreadystatechange = function(){
              if(connect.readyState == 4 && connect.status == 200){
                if(connect.responseText == 1){
                 result = '<div class="alert alert-dismissible alert-success">';
                 result +=  '<h4>Registro completado</h4>';
                 result +=  '<h4>SUCESO EXITOSO</h4>';
                 result +=  '<p><strong>Te estamos redireccionando...</strong></p>';
                 result +=  '</div>';
                 __('_AJAX_REG_EVENT').innerHTML = result;
                 location.href = "?view=index";
         }else{
           __('_AJAX_REG_EVENT').innerHTML = connect.responseText;
         }
        }else if(connect.readyState != 4){
          result = '<div class="alert alert-dismissible alert-warning">';
         result +=  '<button type="button" class="close" data-dismiss="alert">&times;</button>';
         result +=  '<h4>Procesando...</h4>';
         result +=  '<p><strong>Procesando registro...</strong></p>';
         result +=  '</div>';
         __('_AJAX_REG_EVENT').innerHTML = result;
        }
      }
       connect.open('POST','ajax.php?mode=reg_posts',true);
       connect.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       connect.send(form);
 
        }
        else{
            result = '<div class="alert alert-dismissible alert-warning">';
            result +=  '<button type="button" class="close" data-dismiss="alert">&times;</button>';
            result +=  '<h4>ERROR</h4>';
            result +=  '<p><strong>DEBE INGRESAR UNA IMAGEN</strong></p>';
            result +=  '</div>';
            __('_AJAX_REG_EVENT').innerHTML = result;
    }
  }
        else{
            result = '<div class="alert alert-dismissible alert-warning">';
            result +=  '<button type="button" class="close" data-dismiss="alert">&times;</button>';
            result +=  '<h4>ERROR</h4>';
            result +=  '<p><strong>SELECCIONE COORDENADA DEL MAPA</strong></p>';
            result +=  '</div>';
            __('_AJAX_REG_EVENT').innerHTML = result;
    }
  }
      else{
          result = '<div class="alert alert-dismissible alert-warning">';
          result +=  '<button type="button" class="close" data-dismiss="alert">&times;</button>';
          result +=  '<h4>ERROR</h4>';
          result +=  '<p><strong>DEBE COMPLETAR TODOS LOS CAMPOS</strong></p>';
          result +=  '</div>';
          __('_AJAX_REG_EVENT').innerHTML = result;
            }
        }

Lo que me trae problemas es que como quiero enviar o cargar un archivo tipo file , al rellenar los campos correctamente me lleva al php donde se realiza la insercion de estos datos, pero no me reconoce el getElement... del nombre del type="file", eso si los demás datos si me llegan correctamente y me los carga en la DB... pero por lo que estuve leyendo si se fijan donde le marque con negrita estuve leyendo que content-type debo enviar el form-data... pero no me resulta y me redirige solo a una interfaz...
Entonces, como le puedo enviar el multipart/form-data que necesito para que me reconecta el $FILES[name]

desde ya gracias, saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de [abZeroX]

¿Como enviar enctype-multipart/form-data a través de jquery?

Publicado por [abZeroX] (106 intervenciones) el 17/05/2017 22:53:18
Hola, podrias utilizar el objeto FormData de esta manera:

1
2
var formData = new FormData(  document.getElementById('id_de_tu_formulario')  );
connect.send(formData);

Nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

¿Como enviar enctype-multipart/form-data a través de jquery?

Publicado por Jorge (2 intervenciones) el 18/05/2017 20:14:39
Nops, nada aun... asi es como tengo el formulario
1
2
3
4
5
6
7
8
<div role="form" onkeypress="return runScriptPost(event)">
    <div class="w3-center"><br>
      <img src="html/styles/images_post/upload.ico" width="100" height="100" >
      <br>
      <br>
      <Center><input id="img"  name="img" size="30" type="file" required/></center>
    </div>
<input class="w3-input w3-border w3-margin-bottom" id="verificador" type="text" value="xx" name="verificador" hidden required>

Todo el formulario me lo envía bien a la BD, el drama es al momento de cargar una imagen... estoy trabajando con modals
Esto sería parte del codigo que va fusionado con el js de arriba.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad