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的属性直接从中获取它：nameinput

    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