krajee bootstrap file input en un form con otros campos input

publicado por: Anonymous

Tengo un formulario con un textarea y un fileinput

_x000D_

_x000D_

$(document).on('ready', function() {_x000D_
    $("#nom-foto").fileinput({_x000D_
        uploadUrl: 'grabafoto.php',_x000D_
        dropZoneEnabled: false, _x000D_
        previewFileType: "image",_x000D_
        allowedFileExtensions: ["jpg", "gif", "png"] ,        _x000D_
        browseClass: "btn btn-success",_x000D_
        browseLabel: "Selecciona",_x000D_
        browseTitle: "Selecciona la foto",_x000D_
        browseIcon: "<i class="glyphicon glyphicon-picture"></i> ",_x000D_
        removeClass: "btn btn-danger",_x000D_
        removeLabel: "Borrar",_x000D_
        removeTitle: "Anula foto seleccionada",        _x000D_
        removeIcon: "<i class="glyphicon glyphicon-trash"></i> ",_x000D_
        uploadClass: "btn btn-info",_x000D_
        uploadLabel: "Grabar",_x000D_
        uploadTitle: "Graba la foto seleccionada",        _x000D_
        uploadIcon: "<i class="glyphicon glyphicon-upload"></i> ",_x000D_
        previewClass: "bg-warning",_x000D_
        initialCaption: "Selecciona la foto",_x000D_
    });_x000D_
});

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">_x000D_
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/css/fileinput.min.css" />_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/plugins/sortable.min.js" type="text/javascript"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/plugins/purify.min.js" type="text/javascript"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/themes/gly/theme.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/locales/es.js"></script>_x000D_
_x000D_
<div class="container">_x000D_
<form name="modifart" action="" method="post">_x000D_
<div class='col-xs-12 col-sm-6 col-md-6'>_x000D_
               	<h3><span class='label label-info'>DATOS NUEVOS</span></h3>_x000D_
				<div class='well well-sm'>_x000D_
					<div class='row'>_x000D_
						<div class='col-sm-12 col-md-12'>_x000D_
                            <textarea name='obsart' class='form-control' rows='6'></textarea>_x000D_
                        </div>_x000D_
                    </div>_x000D_
                    <div class='row'>_x000D_
						<div class='col-sm-12 col-md-12'>_x000D_
							<h4 align='center'><span class='label label-primary'>ADJUNTAR FOTO</span></h4>_x000D_
							<input id='nom-foto' name='nom-foto' type='file' accept='image/*' class='file-loading' >_x000D_
						</div>_x000D_
					</div>_x000D_
				</div>_x000D_
        	</div>_x000D_
  _x000D_
<div align="center"><input type="submit" class="btn btn-danger" name="send_modif" value="Notificar CAMBIOS" formaction="grabar_modificaciones.php"></div>_x000D_
</form>_x000D_
  </div>

_x000D_

_x000D_

_x000D_

Si selecciono la foto y la subo al servidor con el boton “GRABAR”, la sube perfectamente, pero si después hago clic en el botón “NOTIFICAR CAMBIOS” el valor pasa vacío y no encuentro el fallo.

¿cómo puedo pasar el nombre de la foto seleccionada con el botón submit del formulario (método POST)?

solución

Si vas a subir la imagen al servidor a un archivo php, por medio de un submit, hace falta que en el formulario coloques el enctype.

enctype=”multipart/form-data”

Con eso debería funcionar

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *