Novato aquí. El problema es que actualmente he escrito un método que verifica el tamaño y la extensión del archivo cargado para validarlo. Sin embargo, verificar las extensiones no es una solución, ya que ese tipo de validación puede causar muchos problemas. Lo que quiero hacer es verificar el tipo de archivo real y validarlo sin usar el método de extensión. Intenté usar el validador de archivos jQuery pero fue en vano... Este es un fragmento de mi código actual:
<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />Texto:
App.Dispatcher.on("uploadpic", function() { $(":file").change(function() { if (this.files && this.files[0] && this.files[0].name.match(/\.(jpg|jpeg|png|gif)$/) ) { if(this.files[0].size>1048576) { alert('File size is larger than 1MB!'); } else { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } } else alert('This is not an image file!'); }); function imageIsLoaded(e) { result = e.target.result; $('#image').attr('src', result); }; });Se llama una vez que cambia la entrada de carga y, después de la validación, carga y muestra la imagen. Por ahora, solo me importa la validación y cualquier ayuda o idea sería muy apreciada.
Prueba algo como esto:
JavaScript
const file = this.files[0]; const fileType = file['type']; const validImageTypes = ['image/gif', 'image/jpeg', 'image/png']; if (!validImageTypes.includes(fileType)) { // invalid file type code goes here. }jQuery
var file = this.files[0]; var fileType = file["type"]; var validImageTypes = ["image/gif", "image/jpeg", "image/png"]; if ($.inArray(fileType, validImageTypes) < 0) { // invalid file type code goes here. }No necesitas jquery aquí.
var mimeType=this.files[0]['type'];//mimeType=image/jpeg or application/pdf etc... //ie image/jpeg will be ['image','jpeg'] and we keep the first value if(mimeType.split('/')[0] === 'image'){ console.log('the file is image'); }También puede crear una función para verificar cuándo un archivo es una imagen.
function isImage(file){ return file['type'].split('/')[0]=='image');//returns true or false } isImage(this.file[0]);Actualizar (es6)
usar el método includes de es6 lo hace aún más simple.
const isImage = (file) => file['type'].includes('image');Consulte una consulta relacionada aquí . La respuesta aquí sugiere cargar la imagen en un objeto Imagen y verificar que sus propiedades de ancho y alto no sean cero. Creo que la técnica también se puede utilizar para resolver su problema.
También elaboré un violín para que lo consultes. Código pertinente a continuación:
var img = new Image(); img.addEventListener("load",function(){ alert('success'); }); img.addEventListener("error",function(){ alert('error'); }); img.src = picFile.result;