Front-end JS muestra miniaturas de imágenes cargadas (lectura de imágenes locales)

Requisito: haga clic en el botón cargar imagen, después de seleccionar la imagen, la imagen se mostrará directamente en la miniatura sin solicitar la interfaz de back-end.

Solución: Use los métodos en FileReadery .FileReaderreadAsDataURL

El primer paso es obtener los datos
de (cargar etiqueta de archivo) , similar a la imagen a continuación . El segundo paso es obtener los datos del archivo, ejecute el siguiente códigoinput[type=“file”]file
inserte la descripción de la imagen aquí

// file 是文件数据

// 读取文件
var reader = new FileReader();
// base64位读取
reader.readAsDataURL(file);
reader.onload = function (e) {
    
    
  // 给img标签src复制(结果是base64图片)
  img_src = e.target.result;
}

Mostrar resultados:


inserte la descripción de la imagen aquí
Seleccionar imagen antes de la selección
inserte la descripción de la imagen aquí
Después de la selección
inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_17627195/article/details/131942610
Recomendado
Clasificación