<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <section id="contact"> <div class="container"> <div class="well well-sm"> <h3><strong>Crear Meme</strong></h3> </div> <div class="row"> <div class="col-md-7"> <img class="img-fluid" src="https://www.mlduforro.com/wp-content/plugins/meme-wordpress/images/meme.png"> </div> <div class="col-md-5"> <h4><strong>Editar Meme</strong></h4> <form> <div class="form-group"> <input type="text" class="form-control" name="" value="" placeholder="TEXTO ARRIBA"> </div> <div class="form-group"> <input type="textabajo" class="form-control" name="" value="" placeholder="TEXTO ABAJO"> </div> <div class="form-group"> <strong>IMAGEN CENTRO</strong> <span class="btn btn-default"> <input type="file" accept="image/png, image/jpeg, image/gif" id="imgInp"> </span> <img id='img-upload'/> </div> <button class="btn btn-default" type="submit" name="button"> <i class="fa fa-paper-plane-o" aria-hidden="true"></i> GUARDAR </button> </form> </div> </div> </div> </section>

/*Font-awesome integration*/ @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); /*Google font integration*/ @import url('https://fonts.googleapis.com/css?family=Roboto'); #contact{ background-color:#f1f1f1; font-family: 'Roboto', sans-serif; } #contact .well{ margin-top:30px; border-radius:0; } #contact .form-control{ border-radius: 0; border:2px solid #1e1e1e; } #contact button{ border-radius:0; border:2px solid #1e1e1e; } #contact .row{ margin-bottom:30px; } @media (max-width: 768px) { #contact iframe { margin-bottom: 15px; } } .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } #img-upload{ width: 100%; }

$(document).ready( function() { $(document).on('change', '.btn-file :file', function() { var input = $(this), label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [label]); }); $('.btn-file :file').on('fileselect', function(event, label) { var input = $(this).parents('.input-group').find(':text'), log = label; if( input.length ) { input.val(log); } else { if( log ) alert(log); } }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-upload').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); $("#clear").click(function(){ $('#img-upload').attr('src',''); $('#urlname').val(''); }); });