La vista previa de la imagen no funciona en reaccionar -- javascript campo con image campo con reactjs campo con onclick campo con onchange camp Relacionados El problema

image preview is not working in react


1
vote

problema

Español

Estoy intentando lo siguiente para la vista previa de la imagen. Cada vez que la función OncHange ImagePreview se llama la función de cambio no responde. Se está atascando después de ejecutar la console.log ("Outside Readurl") . No puedo distinguir por qué está sucediendo esto. ¿Alguna ayuda?

  import React, { Component } from 'react';   class ImagePreview extends Component {    constructor(props) {      super(props);      this.state = { images_attributes: [], imgSrc:'' };    }    fileUpload() {      $("#new_post_image").click();    }    imageChange() {     function readURL(input) {       console.log("bla");       var file = this.state.images_attributes[0].files[0];       if(this.state.images_attributes[0].files[0]) {         var reader = new FileReader();         // var url = reader.readAsDataURL(file.name);          console.log(file);          // console.log(reader);          reader.onloadend = () => {           console.log(reader);           console.log(reader.result);         }       }     }      console.log("outside readURL");     $("#new_post_image").change(function() {       console.log("above readURL");       readURL(this);     });      // if(file.name) {     //   this.setState({     //       imgSrc: file.name     //   })     // }   }    render() {      <form>        <img src={this.state.imgSrc} />        <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />        <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>          <i className="fas fa-camera"></i>          <label className="camera-text"><h4 className="camera-text">Image</h4></label>        </button>      </form>    } } export default ImagePreview;   
Original en ingles

I'm trying the following thing for image preview. Whenever the onChange function ImagePreview gets called the change function is not responding. It's get's stuck after running the console.log("outside readURL"). I can't make out why this is happening. Any help?

import React, { Component } from 'react';   class ImagePreview extends Component {    constructor(props) {      super(props);      this.state = { images_attributes: [], imgSrc:'' };    }    fileUpload() {      $("#new_post_image").click();    }    imageChange() {     function readURL(input) {       console.log("bla");       var file = this.state.images_attributes[0].files[0];       if(this.state.images_attributes[0].files[0]) {         var reader = new FileReader();         // var url = reader.readAsDataURL(file.name);          console.log(file);          // console.log(reader);          reader.onloadend = () => {           console.log(reader);           console.log(reader.result);         }       }     }      console.log("outside readURL");     $("#new_post_image").change(function() {       console.log("above readURL");       readURL(this);     });      // if(file.name) {     //   this.setState({     //       imgSrc: file.name     //   })     // }   }    render() {      <form>        <img src={this.state.imgSrc} />        <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />        <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>          <i className="fas fa-camera"></i>          <label className="camera-text"><h4 className="camera-text">Image</h4></label>        </button>      </form>    } } export default ImagePreview; 
              

Lista de respuestas

6
 
vote
vote
La mejor respuesta
 

Utilice este código e intente:

  imageChange(e) {    e.preventDefault();     let reader = new FileReader();    let file = e.target.files[0];     reader.onloadend = () => {      this.setState({        file: file,        imagePreviewUrl: reader.result      });    }    reader.readAsDataURL(file)  }   

Reemplazar el método de render:

  render() {  <form>    <img src={this.state.imagePreviewUrl} /> // in constructor don't initilazie with array instaed with blank string    <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />    <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>      <i className="fas fa-camera"></i>      <label className="camera-text"><h4 className="camera-text">Image</h4></label>    </button>  </form>  }   
 

Use this code and try:

imageChange(e) {    e.preventDefault();     let reader = new FileReader();    let file = e.target.files[0];     reader.onloadend = () => {      this.setState({        file: file,        imagePreviewUrl: reader.result      });    }    reader.readAsDataURL(file)  } 

replace render method:

render() {  <form>    <img src={this.state.imagePreviewUrl} /> // in constructor don't initilazie with array instaed with blank string    <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />    <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>      <i className="fas fa-camera"></i>      <label className="camera-text"><h4 className="camera-text">Image</h4></label>    </button>  </form>  } 
 
 

Relacionados problema

1  Seleccione Valor desde el campo completo completo (ONCHCORE) usando WebDriver y Java  ( Select value from auto complete fieldonchange using webdriver and java ) 
Estoy tratando de seleccionar un valor en el campo Autocompletar con el código a continuación. Al ejecutar este código, simplemente resalta el valor aceptado ...

0  ¿OnSelect en un combo cambia de datos dinámicamente en otro combo?  ( Onselect in one combo it changes data dynamically in other combo ) 
Hola, señor, soy nuevo en el mundo JSP y AJAX. Mi problema es Si selecciono una opción de combo, debe cambiar las otras opciones de combo dinámicamente sin p...

3  ¿Cómo forzar el evento de cambio común para JQUERY AUTOCOMPLETLE?  ( How to force the common change event for jquery autocomplete ) 
Estoy usando la jQuery ui autocompletar plugin la forma común: $(function() { $("#foo") .autocomplete({ autoFocus : true, ...

21  ¿Cómo escucho cambios en el valor seleccionado de un radiogrupo usando jQuery?  ( How do i listen for changes to a radiogroups selected value using jquery ) 
Necesito registrar un manejador para un grupo de botones de radio. Estoy usando jQuery y esperaba que su .change lo lograría. Sin embargo, no he experimenta...

-3  Calcule una variable en función de la entrada cambiante  ( Calculate one variable based on changing input ) 
Tengo la siguiente función: function updateInput(ish){ document.getElementById("BetAmount").value = ish; } Tengo las siguientes entradas HTML: <...

0  Cálculo de la variable en JavaScript basado en la entrada del usuario  ( Calculating variable in javascript based on user input ) 
Tengo el siguiente código Javascript: $(':input').bind('keypress keydown keyup change',function(){ var BetAmount1 = parseFloat($(':input[name="BetAmount"]'...

1  Rails 3 & Ajax date_select Onchange => Enviar  ( Rails 3 ajax date select onchange submit ) 
Me gustaría que mi cita se guarde en cualquier momento, cambio mi fecha a través de AJAX, ¿es posible esto? Lo intenté <%= form_for @dates,:remote => true ...

0  Detectar cambios en la entrada [TIPO = "texto"] inmediatamente  ( Detect changes on inputtype text immediately ) 
Tengo que detectar el cambio cuando el valor en input con la clase inpt CAMBIOS. Mi solución: Tengo esta entrada: <input type="text" class="inpt" /> ...

2  La función "Autocompletar" de Internet Explorer no desencadena los eventos JavaScript  ( Internet explorer s autocomplete function does not trigger javascript events ) 
Tengo una página de .asp que usa el evento onChange para activar una búsqueda de información de la base de datos. (Después de ingresar un código, el sistema...

2  La respuesta de Ajax no funciona el 10% del tiempo  ( Ajax response not working 10 of the time ) 
Mi problema es que funciona casi el 90% del tiempo, pero no funciona un 10%. Simplemente no tengo nada. Está utilizando una caja desplegable con un evento ONC...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos