我想改变按钮上的默认文本，即“选择文件”，当我们使用input=" File"。
我该怎么做呢?也可以看到，在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
当前回答
您可以使用这种方法，它即使输入大量文件也能工作。
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>
其他回答
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;
});
});
但是真的只要阅读教程和下载演示，它真的很好。
使用标签的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 >
使用Bootstrap你可以像下面的代码一样做这件事。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
$(document).ready(function () { $('#choose-file').change(function () { var i = $(this).prev('label').clone(); var file = $('#choose-file')[0].files[0].name; $(this).prev('label').text(file); }); }); .custom-file-upload{ background: #f7f7f7; padding: 8px; border: 1px solid #e3e3e3; border-radius: 5px; border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> can you try this <label for="choose-file" class="custom-file-upload" id="choose-file-label"> Upload Document </label> <input name="uploadDocument" type="file" id="choose-file" accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />
Below is an example of a stylized upload button that will read an image, compress it, and download the resulting image. It works by hiding the actual input element, and then through some trickery we make it so that when you click on our fake file uploader it uses the actual input element to pop up the window for choosing a file. By using this method we get 100% control over how the file uploader looks since we are using our own element instead of styling the file upload menu. It also makes it easy to add drag and drop functionality in the future if we ever want to do that.
然后我写了一系列关于这个文件上传按钮的博文。
'use strict' var AMOUNT = 10 var WIDTH = 600 var HEIGHT = 400 var canvas = document.getElementById('canvas') canvas.width = WIDTH canvas.height = HEIGHT //here's how I created the clickable area //user clicks the clickable area > we send a click event //to the file opener > the file opener clicks on the open //file button > the open file dialogue pops up function clickableAreaListener(e){ let clickEvent = new CustomEvent("click",{"from":"fileOpenerHandler"}); document.getElementById("fileOpener").dispatchEvent(clickEvent); } function fileOpenerListener(e) { document.getElementById("file-btn").click(); e.preventDefault(); } function fileSelectedListener(e){ readFiles(e.target.files); } document.getElementById('file-btn').addEventListener('change', fileSelectedListener); document.getElementById("clickable-area").addEventListener('click', clickableAreaListener); document.getElementById("fileOpener").addEventListener("click", fileOpenerListener); function readFiles(files){ files = [].slice.call(files); //turning files into a normal array for (var file of files){ var reader = new FileReader(); reader.onload = createOnLoadHandler(file); reader.onerror = fileErrorHandler; //there are also reader.onloadstart, reader.onprogress, and reader.onloadend handlers reader.readAsDataURL(file); } } function fileErrorHandler(e) { switch(e.target.error.code) { case e.target.error.NOT_FOUND_ERR: throw 'Image not found'; break; case e.target.error.NOT_READABLE_ERR: throw 'Image is not readable'; break; case e.target.error.ABORT_ERR: break; default: throw 'An error occurred while reading the Image'; }; } function createOnLoadHandler(file){ console.log('reading ' + file.name + ' of type ' + file.type) //file.type will be either image/jpeg or image/png function onLoad(e){ var data = e.target.result display(data); var compressedData = compressCanvas(AMOUNT) download(compressedData) } return onLoad } function display(data){ var img = document.createElement('img'); img.src = data; var context = canvas.getContext('2d') context.clearRect(0, 0, WIDTH, HEIGHT); context.drawImage(img, 0, 0, WIDTH, HEIGHT); } function compressCanvas(){ return canvas.toDataURL('image/jpeg', AMOUNT / 100); } function download(data) { function b64toBlob(b64Data, contentType, sliceSize) { contentType = contentType || ''; sliceSize = sliceSize || 512; var byteCharacters = atob(b64Data); var byteArrays = []; for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { var slice = byteCharacters.slice(offset, offset + sliceSize); var byteNumbers = new Array(slice.length); for (var i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } var blob = new Blob(byteArrays, {type: contentType}); return blob; } var chromeApp = Boolean(chrome && chrome.permissions) if (chromeApp){ chrome.fileSystem.chooseEntry({type:'openDirectory'}, function(entry) { chrome.fileSystem.getWritableEntry(entry, function(entry) { entry.getFile('example.jpg', {create:true}, function(entry) { entry.createWriter(function(writer){ writer.write(b64toBlob(data.slice(23), 'image/jpg')) }) }) }) }) } else { let a = document.createElement("a"); a.href = data; a.download = 'downloadExample.jpg' document.body.appendChild(a) a.click(); window.URL.revokeObjectURL(a.href); a.remove() } } .fileInput { display: none; position: absolute; top: 0; right: 0; font-size: 100px; } #clickable-area{ background: #ccc; width: 500px; display: flex; margin-bottom: 50px; } #clickable-area-text{ margin: auto; } .yellow-button { cursor: pointer; color: white; background: #f1c40f; height: 30px; width: 120px; padding: 30px; font-size: 22px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } <div id="clickable-area"> <a id='fileOpener'> </a> <input type="file" class="fileInput" id="file-btn" accept="image/*" multiple/> <div class="yellow-button"><span>Shrink Image</span> </div><p id="clickable-area-text">( you can click anywhere in here ) </p> </div> <canvas id="canvas"></canvas>
Stack Overflow的限制似乎阻止了代码片段实际压缩和下载文件。这里完全相同的代码显示了完整的上传/压缩/下载过程实际上按预期工作。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 如何在Python中获得所有直接子目录
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- 即使模板文件存在，Flask也会引发TemplateNotFound错误
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
- 如何删除和清除所有的本地存储数据
- 如何在Ruby中创建文件
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
