Home / Questions / 41373
Accepted
Pavlo B.
Asked: 2020-12-29 09:42:14 +0800 CST 2020-12-29 09:42:14 +0800 CST

Как получить имя выбранного файла в типе ввода = "файл"?

  • 772

Я пытаюсь ввести некоторые типы fileна своем веб-сайте, но я не вижу, что это такое, когда выбран файл, я пытался следовать примеру здесь: https://tympanus.net/codrops/2015/09/15/styling -настройка -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>

Я хочу, чтобы при выборе файла вместо «Файл 1» вводилось имя файла, и я не знаю, как это сделать, я пытался скопировать код js, который находится на этом веб-сайте, но когда я поставь, он вообще перестанет работать.

javascript

2 Answers

  1. Best Answer

    Если вам нужно просто имя файла, вы можете получить его напрямую 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>

    • 8 

  2. .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