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.
Compruebe si el navegador admite HTML5 FileReader () o no.
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
}
?>