这是不可能的。否则，你可能需要使用Silverlight或Flash上传控件。

从这个问题的答案，我修复了许多评论说，不工作，这是它没有显示多少文件用户选择。

<label for="uploadedFiles" class="btn btn-sm btn-outline-primary">Choose files</label>
<input type="file" name="postedFiles" id="uploadedFiles" multiple="multiple" hidden onchange="javascript:updateList()" />
<input class="btn btn-primary mt-2 btn-action" type="submit" value="Send" formmethod="post" formaction="@Url.Action("Create")" /><br />
<span id="selected-count">Selected files: 0</span>
<script>
    updateList = function () {
        var input = document.getElementById('uploadedFiles');//list of files user uploaded
        var output = document.getElementById('selected-count');//element displaying count
        output.innerHTML = 'Selected files: ' + input.files.length;
    }
</script>

你可以很容易地通过显示文件名来改进它，而不是你想做的任何事情，但我想要的是通知用户他们已经选择了文件。

2017年更新:

我研究过如何实现这一目标。最好的解释/教程在这里: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

我将在这里写摘要，以防它变得不可用。所以你应该有HTML:

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

然后用CSS隐藏输入:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

然后样式标签:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

然后你可以选择添加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;
});
});

但是真的只要阅读教程和下载演示，它真的很好。

您可以使用这种方法，它即使输入大量文件也能工作。

const fileBlocks = document.querySelectorAll('.file-block') const buttons = document.querySelectorAll('.btn-select-file') ;[...buttons].forEach(function (btn) { btn.onclick = function () { btn.parentElement.querySelector('input[type="file"]').click() } }) ;[...fileBlocks].forEach(function (block) { block.querySelector('input[type="file"]').onchange = function () { const filename = this.files[0].name block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename } }) .btn-select-file { border-radius: 20px; } input[type="file"] { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="file-block"> <button class="btn-select-file">Select Image 1</button> <input type="file"> </div> <br> <div class="file-block"> <button class="btn-select-file">Select Image 2</button> <input type="file"> </div>

我将使用一个按钮来触发输入:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

快速干净。

这是不可能的。否则，你可能需要使用Silverlight或Flash上传控件。