Question

我需要一个漂亮的＆＃34; uploadbutton＆＃34;对于一个项目，并在网上找到了一个样式解决方案： https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 它到目前为止工作正常，但我无法运行java脚本。

HTML：

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

JS：

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;
    });
});

我也在jsfiddle尝试过，hade到目前为止也没有成功（https://jsfiddle.net/LLpd1vev/1/）。因为我根本没有使用js的经验，所以我把代码作为ist在网站上。

正如ist所示，文件名对于可用性非常关键，因为它不存在，所以提出了许多问题。

感谢每一位帮助 - 非常高级的推荐！

Answer 1

你几乎就在那里。你的JS正在按预期工作，你没有收到消息的原因就在你的代码的最后部分;

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

此处代码正在检查变量fileName是否已填充，如果填充，则会在label元素中查找span元素。由于这不存在于您的HTML中，因此javascript只会输出错误（可以使用Chrome中的控制台进行检查）。你的HTML应该是这样的;

<input type="file" name="file" id="file" class="inputfile" />
<label for="file"><span>Choose a file</span></label>

此处修复了此问题的更新JSFiddle！

样式输入类型=＆＃34;文件＆＃34; - 文件名javascript-solution不起作用

1 个答案: