更改输入类型=“文件”中的默认文本？

糖粟与秋泊 2024-10-26 18:48:54

使用 for< input 的 label 的 /a> 属性。

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

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

$("#files").change(function() {
  filename = this.files[0].name;
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="files" class="btn">Select Image</label>
    <input id="files" style="visibility:hidden;" type="file">
</div>

Use the for attribute of label for input.

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

Below is the code to fetch name of the uploaded file

$("#files").change(function() {
  filename = this.files[0].name;
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="files" class="btn">Select Image</label>
    <input id="files" style="visibility:hidden;" type="file">
</div>

回复收藏 0 原文

耀眼的星火 2024-10-26 18:48:54

我想这就是你想要的：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

I think this is what you want:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

回复收藏 0 原文

七分※倦醒 2024-10-26 18:48:54

每个浏览器都有自己的控件呈现方式，因此您无法更改控件的文本或方向。

如果您想要 html/css 解决方案与 Flash 或 silverlight 解决方案相比。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就个人而言，由于大多数用户坚持使用他们选择的浏览器，因此可能习惯于在默认呈现中查看控件，因此如果他们看到不同的内容，他们可能会感到困惑（取决于您正在处理的用户类型）。

回复收藏 0 原文

甩你一脸翔 2024-10-26 18:48:54

这可能会对将来的某人有所帮助，您可以根据需要设置输入标签的样式，并将您想要的任何内容放入其中，并隐藏输入并不显示。

它在带有 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>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

This might help someone in the future, you can style the label for the input as you like and put anything you want inside it and hide the input with display none.

It works perfectly on cordova with iOS

<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>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

回复收藏 0 原文

半边脸i 2024-10-26 18:48:54

为此，必须使用 display:none CSS 属性隐藏默认输入按钮，并添加一个新的按钮元素来替换它，以便我们可以根据需要进行自定义。

带引导程序

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 
Optional text here 

<label for="inputField" class="btn btn-info">Try me</label>
<input type="file" id="inputField" style="display:none">

使用 jQuery

在这种情况下，添加到按钮元素的 onclick 属性指示 JavaScript 在单击可见按钮时单击隐藏的默认输入按钮。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Optional text here 

<button style="cursor:pointer" onclick="$('#inputField').click()">Click me</button>
<input type="file" id="inputField" style="display:none">

带有事件监听器的纯 JavaScript

document.getElementById('btn').addEventListener('click', () => { 
  document.getElementById('inputField').click();
})

Optional text here 
<button style="cursor:pointer" id="btn">Click me</button>
<input type="file" id="inputField" style="display:none">

To achieve this, the default input button must be hidden using display:none CSS property and a new button element is added to replace it, so we can customize as we wish.

With Bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 
Optional text here 

<label for="inputField" class="btn btn-info">Try me</label>
<input type="file" id="inputField" style="display:none">

With jQuery

In this case the onclick attribute added to the button element is indicating to JavaScript to click on the hidden default input button whenever the visible button is clicked.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Optional text here 

<button style="cursor:pointer" onclick="$('#inputField').click()">Click me</button>
<input type="file" id="inputField" style="display:none">

Plain JavaScript with event listener

document.getElementById('btn').addEventListener('click', () => { 
  document.getElementById('inputField').click();
})

Optional text here 
<button style="cursor:pointer" id="btn">Click me</button>
<input type="file" id="inputField" style="display:none">

回复收藏 0 原文

甜宝宝 2024-10-26 18:48:54

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

回复收藏 0 原文

小霸王臭丫头 2024-10-26 18:48:54

$(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;" />

$(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;" />

回复收藏 0 原文

冷︶言冷语的世界 2024-10-26 18:48:54

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

但实际上只需阅读教程并下载演示，它真的很棒。

Update 2017:

I have done research on how this could be achieved. And the best explanation/tutorial is here:
https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

I'll write summary here just in case it becomes unavailable. So you should have HTML:

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

Then hide the input with CSS:

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

Then style the label:

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

Then optionally you can add JS to display the name of the file:

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

But really just read the tutorial and download the demo, it's really good.

回复收藏 0 原文

明月松间行 2024-10-26 18:48:54

你可以使用这种方法，即使输入很多文件也能工作。

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>

You can use this approach, it works even if a lot of files inputs.

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>

回复收藏 0 原文

绾颜 2024-10-26 18:48:54

诀窍是在单击文件输入时触发单击事件，并通过 CSS 管理默认输入文件的可见性。您可以这样做：

jQuery：

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}

.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML 代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

The trick is to trigger a click event on click of the file input and manage the visibility of the default input file via CSS. Here's how you can do it:

jQuery:

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}

.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

回复收藏 0 原文

椒妓 2024-10-26 18:48:54

我制作了一个脚本并将其发布在 GitHub 上： get selectFile.js
易于使用，随意克隆。

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

演示

jsfiddle.net/Thielicious/4oxmsy49/

I made a script and published it at GitHub: get selectFile.js
Easy to use, feel free to clone.

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

DEMO

jsfiddle.net/Thielicious/4oxmsy49/

回复收藏 0 原文

初见终念 2024-10-26 18:48:54

这应该有效：

input.*className*::-webkit-file-upload-button {
  *style content..*
}

This should work:

input.*className*::-webkit-file-upload-button {
  *style content..*
}

回复收藏 0 原文

十雾 2024-10-26 18:48:54

这是如何使用引导程序完成的，只有你应该将原始输入放在某处......idk
在 head 中删除 < br>如果你有它，因为它只是隐藏的并且无论如何它都占用空间:)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>

Here is how its done with bootstrap, only u should put the original input somewhere...idk
in head and delete the < br > if you have it, because its only hidden and its taking space anyway :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>

回复收藏 0 原文

乖乖兔^ω^ 2024-10-26 18:48:54

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

Using Bootstrap you can do this thing like the below code.

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

回复收藏 0 原文

缺⑴份安定 2024-10-26 18:48:54

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

回复收藏 0 原文

栀子花开つ 2024-10-26 18:48:54

我的解决方案...

HTML：

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

Jquery：

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

这太邪恶了：D

My solution...

HTML :

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

Jquery:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

This is just evil :D

回复收藏 0 原文

沉睡月亮 2024-10-26 18:48:54

我构建了一个更容易做到这一点的脚本。

例如：

基本上，我的脚本与此非常相似链接

代码

纯javascript，无需依赖

<!-- bootstrap.min.css not necessary -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">
<input data-com="fileBtn" placeholder="Select Image"> <!-- com: components -->

<input data-com="fileBtn" placeholder="Select File">

<div class="mt-2">

<input id="build-by-myself" placeholder="Select Video" accept="video/mp4, video/webm">

<div>
<script>

  //

I build a script that can be easier to do that.

For example:

<input data-com="fileBtn" placeholder="Select Image">

basically, my script is very similar to this link

Code

Pure javascript, no dependencies needed

<!-- bootstrap.min.css not necessary -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">

<input data-com="fileBtn" placeholder="Select Image"> <!-- com: components -->
<input data-com="fileBtn" placeholder="Select File">
<div class="mt-2">
<input id="build-by-myself" placeholder="Select Video" accept="video/mp4, video/webm">
<div>

<script>
  // ???? Test
  (()=>{
    window.onload = () =>{
      // FileButton.className ="btn btn-danger"
      FileButton.BuildAll() // auto build all data-com="fileBtn"
      
      // or you can specify the target that you wanted.
      new FileButton(document.getElementById("build-by-myself"), "btn btn-danger")
    }
  })()

  // ???? script begin
  class FileButton {
    static className = "btn btn-primary"
    static BuildAll() {
      document.querySelectorAll(`input[data-com="fileBtn"]`).forEach(input=>{
        new FileButton(input, FileButton.className)
      })
    }
    /**
     * @param {HTMLInputElement} input
     * @param {string} btnClsName
     * */
    constructor(input, btnClsName) {
      input.style.display = "none" // [display is better than visibility](https://stackoverflow.com/a/48495293/9935654)
      input.type = "file"
      const frag = document.createRange().createContextualFragment(`<button class="${btnClsName}">${input.placeholder}</button>`)
      const button = frag.querySelector(`button`)

      input.parentNode.insertBefore(frag, input)

      button.onclick = ()=>{
        input.click()
      }
      input.addEventListener(`change`, (e)=>{
        // create a textNode to show the file name.
        const file = input.files[0]
        if (file === undefined) {
          return
        }
        const textNode = document.createTextNode(file.name)
        if (button.textNode) { // create a new attribute to record previous data.
          button.textNode.remove()
        }
        button.textNode = textNode
        button.parentNode.insertBefore(textNode, input)
      })
    }
  }
</script>

Reference

回复收藏 0 原文

空心空情空意 2024-10-26 18:48:54

好的，创建自定义输入文件的非常简单的纯 CSS 方法。

使用标签，但正如您从之前的答案中知道的那样，标签不会调用 onclick
Firefox 中的函数，可能是一个错误，但与以下内容无关。

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

您要做的就是设置标签的样式，使其看起来像您希望的那样，

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

现在只需隐藏实际的输入按钮，但您无法将其设置为 visability: hide

因此，通过设置 opacity 使其不可见： 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

现在您可能已经注意到，我的标签上有与输入字段相同的类，那是因为我希望两者具有相同的样式，因此无论您在哪里单击标签，您实际上是在点击不可见的输入字段。

Ok so very simple pure css way of creating your custom input file.

Use labels, but as you know from previous answers, label doesn't invoke onclick
function in firefox, may be a bug but doesn't matter with the following.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

What you do is style the label to look how you want it to

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

now simply hide the actual input button, but you cant set it to to visability: hidden

So make in invisible by setting opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

now as you might have noticed i have the same class on my label as i do my input field, that is because i want the to both have the same styling, thus where ever you click on the label, you are actually clicking on the invisible input field.

回复收藏 0 原文

溺孤伤于心 2024-10-26 18:48:54

我会使用按钮来触发输入：

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

快速而干净。

I'd use a button to trigger the input:

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

Quick and clean.

回复收藏 0 原文

记忆之渊 2024-10-26 18:48:54

下面是一个风格化的上传按钮的示例，它将读取图像、压缩它并下载结果图像。它的工作原理是隐藏实际的输入元素，然后通过一些技巧，当您单击我们的假文件上传器时，它会使用实际的输入元素弹出用于选择文件的窗口。通过使用此方法，我们可以 100% 控制文件上传器的外观，因为我们使用自己的元素而不是设置文件上传菜单的样式。如果我们想在将来添加拖放功能，它还可以让您轻松添加拖放功能。

然后我实际上创建了关于此文件上传按钮的一系列博客文章。

'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 限制似乎阻止了代码片段实际压缩和下载文件。此处完全相同的代码显示完整的上传/压缩/下载过程确实按预期工作。

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.

And then I actually created a series of blog posts about this file upload button.

'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 limitations seem to prevent the code snippet from actually compressing and downloading the file. The exact same code here shows that the full upload/compress/download process does actually work as intended.

回复收藏 0 原文

找回味觉 2024-10-26 18:48:54

此问题的答案，我修复了许多评论中所说的对他们不起作用的问题，即它没有显示用户选择了多少文件。

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

您可以通过显示文件名称或任何您想要做的事情来轻松改进它，但我想要的只是通知用户他们已经选择了文件。

With answers from this question, I fixed what many in coments said doesn¨t work for them which is that it's not showing how many files user chose.

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

You can easily improve it by showing names of files instead or whatever you wish to do but all I wanted was to inform user that they have already picked files.

回复收藏 0 原文

我要还你自由 2024-10-26 18:48:54

您可以使用简单的按钮并

使用 jquery 和 bootstrap 隐藏输入文件：

HTML 代码

<button class="btn btn-white" id="btn-file" type="button"><i class="fa fa-file-pdf"></i> Anexar Documento</button>
<input name="shutdown" id="input-file" type="file" class="form-control hidden" accept="application/pdf, image/png, image/jpeg">

CSS :

.hidden{display:none}

JS :

$("#btn-file").click(function () {
    $("#input-file").trigger('click');
});

$("#input-file").change(function () {
    var file = $(this)[0].files[0].name;
    $("#btn-file").html('<i class="fa fa-file-pdf"></i> ' + file);
});

You can use a simple button and hide input file

using jquery and bootstrap :

HTML code

<button class="btn btn-white" id="btn-file" type="button"><i class="fa fa-file-pdf"></i> Anexar Documento</button>
<input name="shutdown" id="input-file" type="file" class="form-control hidden" accept="application/pdf, image/png, image/jpeg">

CSS :

.hidden{display:none}

JS :

$("#btn-file").click(function () {
    $("#input-file").trigger('click');
});

$("#input-file").change(function () {
    var file = $(this)[0].files[0].name;
    $("#btn-file").html('<i class="fa fa-file-pdf"></i> ' + file);
});

回复收藏 0 原文

残疾 2024-10-26 18:48:54

自定义输入文本（不使用 jQuery）

如果您想使用普通 JavaScript 自定义文件选择器按钮的文本，这里有一个片段：

document.querySelector("#files").onchange = function() {
  const fileName = this.files[0]?.name;
  const label = document.querySelector("label[for=files]");
  label.innerText = fileName ?? "Browse Files";
};

label {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 5px 10px;
  font-family: 'Helvetica', sans-serif;
  transition: .5s;
}

label:hover {
  background-color: #eee;
}

<div class="input_container">
  <label for="files" class="btn">Browse Files</label>
  <input id="files" style="display:none;" type="file">
</div>

如果您想设置文件选择器按钮的样式，我有一个解决方案：
设置输入 type="file" 按钮的样式。

Customize Input Text (without jQuery)

If you want to customize the text of the file selector button, with vanilla JavaScript, here is a snippet:

document.querySelector("#files").onchange = function() {
  const fileName = this.files[0]?.name;
  const label = document.querySelector("label[for=files]");
  label.innerText = fileName ?? "Browse Files";
};

label {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 5px 10px;
  font-family: 'Helvetica', sans-serif;
  transition: .5s;
}

label:hover {
  background-color: #eee;
}

<div class="input_container">
  <label for="files" class="btn">Browse Files</label>
  <input id="files" style="display:none;" type="file">
</div>

I you wanted to style the file selector button, I have a solution for that:
Styling an input type="file" button.

回复收藏 0 原文

暗喜 2024-10-26 18:48:54

在 Javascript 中，您可以为输入元素指定“title”属性，例如：

回复收藏 0 原文

笙痞 2024-10-26 18:48:54

由于浏览器安全限制，您无法直接修改它。

但是，您可以隐藏一个输入并使用所需的文本创建输入：

**请不要使用display: none 。它不会与它一起工作。

<div>
  <label>
        <span>Choose my file</span>
        <input type="file" hidden  />
        <input
          type="text"
          placeholder="Upload your file"
        />
      </label>
</div>

label {
     background-color: #f0f0f0;
    width: 300px;
    border-radius: 5px;
    cursor: pointer;
    padding: 8px 0px 10px 10px;
    background:  #C69F89
 
}
label:hover{
 background: #A6A15E
}

input[type="text"] {
  margin-top: 30px;
  
  padding: 10px 5px;
  border: 1px solid #ccc;
  border-radius: 0px 4px 4px 0px;
  width: 300px;
}

You can't directly modify it due to browser security restrictions.

But, you can hide one input and create your input with the text you need:

**Please do NOT use display: none. It would not work with it.

<div>
  <label>
        <span>Choose my file</span>
        <input type="file" hidden  />
        <input
          type="text"
          placeholder="Upload your file"
        />
      </label>
</div>

label {
     background-color: #f0f0f0;
    width: 300px;
    border-radius: 5px;
    cursor: pointer;
    padding: 8px 0px 10px 10px;
    background:  #C69F89
 
}
label:hover{
 background: #A6A15E
}

input[type="text"] {
  margin-top: 30px;
  
  padding: 10px 5px;
  border: 1px solid #ccc;
  border-radius: 0px 4px 4px 0px;
  width: 300px;
}

回复收藏 0 原文

上课铃就是安魂曲 2024-10-26 18:48:54

纯CSS解决方案：

.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}

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

来源： http://tympanus.net /codrops

（您也可以使用 ::file-selector-button，但这不允许您更改其文本。）

Pure CSS solution:

.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}

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

source: http://tympanus.net/codrops

(You could also just style the button with ::file-selector-button, but that doesn't allow you to change its text.)

回复收藏 0 原文

記柔刀 2024-10-26 18:48:54

这是一种解决方案，它也以与未修改的文件相同的方式显示所选文件，但可以设置按钮的文本和样式。它也不需要任何外部库/模块，它是 100% 可定制的，它甚至在标题属性中显示所选文件的完整列表，就像实际的文件输入类型一样：

<script>
  window.onload = ()=>{
    sourceElement.addEventListener("change", async(e) => {
      if(sourceElement.files.length==0){
        afterChooseFileButtonB.innerText="No file chosen"
        sourceElementLabel.title="No file chosen"
      }else{
        afterChooseFileButtonB.innerText=sourceElement.files[0].name
        sourceElementLabel.title=inputElement.files[0].name
      }
    })
    inputElement.addEventListener("change", () => {
      if(inputElement.files.length==0){
        afterChooseFileButtonA.innerText="No file chosen, please choose one or more files"
        inputElementLabel.title="No file chosen, one or more files are required"
      }else if(inputElement.files.length!=1){
        afterChooseFileButtonA.innerText=inputElement.files.length+" files"
        inputElementLabel.title=Object.values(inputElement.files).map(file=>file.name).join("\n")
      }else{
        afterChooseFileButtonA.innerText=inputElement.files[0].name
        inputElementLabel.title=inputElement.files[0].name
      }
    })
  }
</script>
<label for="inputElement" style="font-family: monospace;" form="mainform" id="inputElementLabel" title="No file chosen, one or more files are required">Target Files: 
  <button style="font-family: monospace; background-color: #87ceeb;" onclick="inputElement.click()">
    <u>Please</u> <b>Choose</b> <span style="color: red;">Target</span> <em>Files</em>
  </button>
  <span id="afterChooseFileButtonA">No file chosen, please choose one or more files</span>
</label>
<input type="file" id="inputElement" multiple="" name="inputElement" style="font-family: monospace; display: none;" form="mainform">
<br>
<label for="sourceElement" style="font-family: monospace;" form="mainform" id="sourceElementLabel" title="No file chosen">Source File: 
  <button style="font-family: monospace; background-color: #87ceeb;" onclick="sourceElement.click()">
    Choose The Source File
  </button>
  <span id="afterChooseFileButtonB">No file chosen</span>
</label>
<input type="file" id="sourceElement" name="sourceElement" style="font-family: monospace; display: none;" form="mainform">

这是常规样式按钮的另一种变体：

<script>
  window.onload = ()=>{
    sourceElement.addEventListener("change", async(e) => {
      if(sourceElement.files.length==0){
        afterChooseFileButtonB.innerText="No file chosen"
        sourceElementLabel.title="No file chosen"
      }else{
        afterChooseFileButtonB.innerText=sourceElement.files[0].name
        sourceElementLabel.title=inputElement.files[0].name
      }
    })
    inputElement.addEventListener("change", () => {
      if(inputElement.files.length==0){
        afterChooseFileButtonA.innerText="No file chosen, please choose one or more files"
        inputElementLabel.title="No file chosen, one or more files are required"
      }else if(inputElement.files.length!=1){
        afterChooseFileButtonA.innerText=inputElement.files.length+" files"
        inputElementLabel.title=Object.values(inputElement.files).map(file=>file.name).join("\n")
      }else{
        afterChooseFileButtonA.innerText=inputElement.files[0].name
        inputElementLabel.title=inputElement.files[0].name
      }
    })
  }
 </script>
<label for="inputElement" style="font-family: monospace;" form="mainform" id="inputElementLabel" title="No file chosen, one or more files are required">Target Files: 
  <button style="font-family: monospace;" onclick="inputElement.click()">
    <u>Please</u> <b>Choose</b> <span style="color: red;">Target</span> <em>Files</em>
  </button>
  <span id="afterChooseFileButtonA">No file chosen, please choose one or more files</span>
</label>
<input type="file" id="inputElement" multiple="" name="inputElement" style="font-family: monospace; display: none;" form="mainform">
<br>
<label for="sourceElement" style="font-family: monospace;" form="mainform" id="sourceElementLabel" title="No file chosen">Source File: 
  <button style="font-family: monospace;" onclick="sourceElement.click()">
    Choose The Source File
  </button>
  <span id="afterChooseFileButtonB">No file chosen</span>
</label>
<input type="file" id="sourceElement" name="sourceElement" style="font-family: monospace; display: none;" form="mainform">

Here is a solution that also shows the selected files in the same way as the unmodified one but can have the text and style of the button be set. It also does not need any external libraries/modules, it is 100% customizable, it even displays the full list of selected files in the title property, just like the actual file input type:

<script>
  window.onload = ()=>{
    sourceElement.addEventListener("change", async(e) => {
      if(sourceElement.files.length==0){
        afterChooseFileButtonB.innerText="No file chosen"
        sourceElementLabel.title="No file chosen"
      }else{
        afterChooseFileButtonB.innerText=sourceElement.files[0].name
        sourceElementLabel.title=inputElement.files[0].name
      }
    })
    inputElement.addEventListener("change", () => {
      if(inputElement.files.length==0){
        afterChooseFileButtonA.innerText="No file chosen, please choose one or more files"
        inputElementLabel.title="No file chosen, one or more files are required"
      }else if(inputElement.files.length!=1){
        afterChooseFileButtonA.innerText=inputElement.files.length+" files"
        inputElementLabel.title=Object.values(inputElement.files).map(file=>file.name).join("\n")
      }else{
        afterChooseFileButtonA.innerText=inputElement.files[0].name
        inputElementLabel.title=inputElement.files[0].name
      }
    })
  }
</script>
<label for="inputElement" style="font-family: monospace;" form="mainform" id="inputElementLabel" title="No file chosen, one or more files are required">Target Files: 
  <button style="font-family: monospace; background-color: #87ceeb;" onclick="inputElement.click()">
    <u>Please</u> <b>Choose</b> <span style="color: red;">Target</span> <em>Files</em>
  </button>
  <span id="afterChooseFileButtonA">No file chosen, please choose one or more files</span>
</label>
<input type="file" id="inputElement" multiple="" name="inputElement" style="font-family: monospace; display: none;" form="mainform">
<br>
<label for="sourceElement" style="font-family: monospace;" form="mainform" id="sourceElementLabel" title="No file chosen">Source File: 
  <button style="font-family: monospace; background-color: #87ceeb;" onclick="sourceElement.click()">
    Choose The Source File
  </button>
  <span id="afterChooseFileButtonB">No file chosen</span>
</label>
<input type="file" id="sourceElement" name="sourceElement" style="font-family: monospace; display: none;" form="mainform">

Here is another variation with regularly styled buttons:

<script>
  window.onload = ()=>{
    sourceElement.addEventListener("change", async(e) => {
      if(sourceElement.files.length==0){
        afterChooseFileButtonB.innerText="No file chosen"
        sourceElementLabel.title="No file chosen"
      }else{
        afterChooseFileButtonB.innerText=sourceElement.files[0].name
        sourceElementLabel.title=inputElement.files[0].name
      }
    })
    inputElement.addEventListener("change", () => {
      if(inputElement.files.length==0){
        afterChooseFileButtonA.innerText="No file chosen, please choose one or more files"
        inputElementLabel.title="No file chosen, one or more files are required"
      }else if(inputElement.files.length!=1){
        afterChooseFileButtonA.innerText=inputElement.files.length+" files"
        inputElementLabel.title=Object.values(inputElement.files).map(file=>file.name).join("\n")
      }else{
        afterChooseFileButtonA.innerText=inputElement.files[0].name
        inputElementLabel.title=inputElement.files[0].name
      }
    })
  }
 </script>
<label for="inputElement" style="font-family: monospace;" form="mainform" id="inputElementLabel" title="No file chosen, one or more files are required">Target Files: 
  <button style="font-family: monospace;" onclick="inputElement.click()">
    <u>Please</u> <b>Choose</b> <span style="color: red;">Target</span> <em>Files</em>
  </button>
  <span id="afterChooseFileButtonA">No file chosen, please choose one or more files</span>
</label>
<input type="file" id="inputElement" multiple="" name="inputElement" style="font-family: monospace; display: none;" form="mainform">
<br>
<label for="sourceElement" style="font-family: monospace;" form="mainform" id="sourceElementLabel" title="No file chosen">Source File: 
  <button style="font-family: monospace;" onclick="sourceElement.click()">
    Choose The Source File
  </button>
  <span id="afterChooseFileButtonB">No file chosen</span>
</label>
<input type="file" id="sourceElement" name="sourceElement" style="font-family: monospace; display: none;" form="mainform">

回复收藏 0 原文

更改输入类型=“文件”中的默认文本？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（27）

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

Below is the code to fetch name of the uploaded file

我想这就是你想要的：

I think this is what you want:

带引导程序

使用 jQuery

带有事件监听器的纯 JavaScript

With Bootstrap

With jQuery

Plain JavaScript with event listener

代码

Code

Reference

自定义输入文本（不使用 jQuery）

Customize Input Text (without jQuery)

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

更改输入类型=“文件”中的默认文本？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（27）

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

Below is the code to fetch name of the uploaded file

我想这就是你想要的：

I think this is what you want:

带引导程序

使用 jQuery

带有事件监听器的纯 JavaScript

With Bootstrap

With jQuery

Plain JavaScript with event listener

代码

Code

Reference

自定义输入文本（不使用 jQuery）

Customize Input Text (without jQuery)

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。