我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。

我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?


当前回答

使用标签的for属性进行输入。

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

下面是获取上传文件名称的代码


$(" #文件").change(函数(){ 文件名= this.files[0].name; console.log(文件名); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div > <label for="files" class="btn">选择图像</label> <input id="files" style="visibility:hidden;" type="file"> . < / div >

其他回答

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

为了实现这一点,默认的输入按钮必须使用display:none CSS属性隐藏,并添加一个新的按钮元素来替换它,因此我们可以根据需要进行定制。

与引导

<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”> 此处为可选文本 <label for=“img” class=“btn btn-info”>试试我</label> <输入类型=“文件” id=“img” 样式=“显示:无”>

与jQuery

在本例中,添加到button元素的onclick属性指示JavaScript在单击可见按钮时单击隐藏的默认输入按钮。

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> 此处为可选文本 <button style=“cursor:pointer” onclick=“$('#input').click()”>Click me</button> <输入类型=“文件” id=“输入” 样式=“显示:无”>

简单的JavaScript事件监听器

. getelementbyid (btn)。addEventListener('click', () => { . getelementbyid(“输入”).click (); }) 此处可选文本 <button style="cursor:pointer" id="btn">点击我</button> <input type="file" id="input" style="display:none">

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

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

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

这可能会在将来帮助别人,你可以为输入设置你喜欢的标签,把你想要的任何东西放在里面,隐藏输入,显示为none。

它在iOS的cordova上完美地工作

<link href=“https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css” rel=“stylesheet”/> <label for=“imageUpload” class=“btn btn-primary btn-block btn-outlined”>Seleccionar imagenes</label> <输入类型=“文件” id=“图像上传” 接受=“图像/*” 样式=“显示:无”>

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

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

快速干净。