vista subir seleccionar previsualizar previa mostrarla imagenes imagen con cargar php javascript jquery html5

php - subir - ¿Cómo obtener una vista previa de una imagen antes y después de la carga?



subir imagenes con html5 (3)

Voy a obtener una vista previa de una imagen o foto en un formulario, pero no funciona y el código HTML se ve así:

<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm"> <p><label for="image">Upload Image:</label> <input type="file" id="imageUpload"/></p> <p><button type="submit" class="button">Save</button></p> <div id="preview"> <img width="160px" height="120px" src="profile pic.jpg" id="thumb" /> </div> </form>

e incorporó el código / script JS a continuación:

<script type="text/jaavascript"> $(document).ready(function(){ var thumb=$(''#thumb''); new AjaxUpload(''imageUpload'',{ action:$(''newHotnessForm'').attr(''action''), name:''image'', onSubmit:function(file,extension){ $(''#preview'').addClass(''loading''); }, onComplete:function(file,response){ thumb.load(function(){ $(''#preview'').removeClass(''loading''); thumb.unbind(); }); thumb.attr(''src'',response); } }); });

Hay 2 preguntas principales en mi formulario:
1. ¿Por qué no funciona la vista previa de la imagen o imagen?
2. ¿Cómo pegar la foto del formulario cuando se hace clic en el botón Guardar, irá / vinculará a otra página php o php que creé?


La respuesta de meVeekay fue buena y la estoy haciendo más improvisada haciendo 2 cosas.

  1. Compruebe si el navegador admite HTML5 FileReader () o no.

  2. Permita que solo se cargue el archivo de imagen al verificar su extensión.

HTML:

<div id="wrapper"> <input id="fileUpload" type="file" /> <br /> <div id="image-holder"></div> </div>

jQuery:

$("#fileUpload").on(''change'', function () { var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf(''.'') + 1).toLowerCase(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { var image_holder = $("#image-holder"); image_holder.empty(); var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[0]); } else { alert("This browser does not support FileReader."); } } else { alert("Pls select only images"); } });

Para una comprensión detallada de FileReader ()

Verifique este artículo: utilice la imagen de vista previa FileReader () antes de cargar.


Prueba esto: (Para vista previa)

<script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(''#blah'').attr(''src'', e.target.result); } reader.readAsDataURL(input.files[0]); } } </script> <body> <form id="form1" runat="server"> <input type=''file'' onchange="readURL(this);" /> <img id="blah" src="#" alt="your image" /> </form> </body>

Demostración de trabajo aquí>


####################### ### the img page ### ####################### <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(''#f'').live(''change'' ,function(){ $(''#fo'').ajaxForm({target: ''#d''}).submit(); }); }); // }); </script> <form id="fo" name="fo" action="nextimg.php" enctype="multipart/form-data" method="post"> <input type="file" name="f" id="f" value="start upload" /> <input type="submit" name="sub" value="upload"/> </form> <div id="d"></div> ############################# ### the nextimg page ### ############################# <?php $name=$_FILES[''f''][''name'']; $tmp=$_FILES[''f''][''tmp_name'']; $new=time().$name; $new="upload/".$new; move_uploaded_file($tmp,$new); if($_FILES[''f''][''error'']==0) { ?> <h1>PREVIEW</h1><br /><img src="<?php echo $new;?>" width="100" height="100"/> <?php } ?>