¿Cómo obtener el nombre del archivo seleccionado en un input type=“file”?

Estoy intentando hacer unos inputs tipo file en mi web pero no consigo que cuando se seleccione un archivo se vea cual es, he intentado seguir el ejemplo de aquí: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
<input id="image1" type="file" class="inputfile hidden-xs hidden-md" value="image1" name="image1" required />
<label for="image1" class="my-btn btn-danger"><center>Archivo 1</center></label><br>

Lo que quiero es que cuando yo seleccione un archivo en vez de poner "Archivo 1" ponga el nombre del archivo y no sé como hacerlo, he probado de copiar el código js que hay en esa web pero cuando lo pongo deja de funcionar del todo.

5
задан 28.12.2016, 20:43
0 ответов

Если то, что ты хочешь, является просто тогда именем файла, ты можешь получать это прямо input соглашаясь на признак name первого файла, загруженного в input:

document.getElementById('image1').files[0].name;

Однако, если ты пробуешь получать маршрут, в котором находится вышеупомянутый файл, ты можешь пробовать это реализовывая this.value. Однако, поскольку ты можешь наблюдать, он возвращает тебе маршрут, который не реальный файла и заменяет это тебе на один fakepath. Это проистекает того, что по причине безопасности не добавляют маршрут, в котором пользователь считает хранившимся файл.

Твой измененный пример:

document.getElementById('image1').onchange = function () {
  console.log(this.value);
  document.getElementById('fichero').innerHTML = document.getElementById('image1').files[0].name;
}
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
<input id="image1" type="file" class="inputfile hidden-xs hidden-md" value="image1" name="image1" required />
<label id="fichero" for="image1" class="my-btn btn-danger"><center>Archivo 1</center></label><br>
6
ответ дан 03.12.2019, 17:57

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
 <input id="image1" type="file" class="inputfile hidden-xs hidden-md" value="image1" name="image1" required />
										<label for="image1" class="my-btn btn-danger"><span>Archivo 1</span></label><br>
                   <script>
                   'use strict';

;( function ( document, window, index )
{
	var inputs = document.querySelectorAll( '.inputfile' );
	Array.prototype.forEach.call( inputs, function( input )
	{
		var label	 = input.nextElementSibling,
			labelVal = label.innerHTML;

		input.addEventListener( 'change', function( e )
		{
			var fileName = '';
			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else
				fileName = e.target.value.split( '\\' ).pop();

			if( fileName )
				label.querySelector( 'span' ).innerHTML = fileName;
			else
				label.innerHTML = labelVal;
		});

		// Firefox bug fix
		input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
		input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
	});
}( document, window, 0 ));</script>
0
ответ дан 03.12.2019, 17:57
  • 1
    Нажми на выполнять и протестируй это. Привет –  28.12.2016, 20:18
  • 2
    Из-за sierto помести span в твоем html –  28.12.2016, 20:32

Теги

Похожие вопросы