转换文件名的多个文件解决方案

自举例子

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. jQuery JS:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS没有jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

转换文件名的多个文件解决方案

自举例子

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. jQuery JS:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS没有jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

样式化文件输入是出了名的困难，因为大多数浏览器不会改变CSS或javascript的外观。

即使输入的大小也不会对以下内容做出反应:

<input type="file" style="width:200px">

相反，你需要使用size属性:

<input type="file" size="60" />

对于任何比这更复杂的样式(例如改变浏览按钮的外观)，你将需要考虑在本机文件输入上覆盖一个有样式的按钮和输入框的狡猾方法。rm在www.quirksmode.org/dom/inputfile.html上提到的那篇文章是我见过的最好的一篇。

更新

虽然直接对<input>标记设置样式很困难，但在<label>标记的帮助下，这很容易实现。请看下面来自@JoshCrozier的回答:https://stackoverflow.com/a/25825731/10128619

我能想到的唯一方法是在它被渲染后用javascript找到按钮，并分配一个样式给它

你也可以看看这个记录

一个图像上传应用程序的演示，适用于大多数后端良好的动画功能。

// common function render_element(styles, el) { for (const [kk, vv] of Object.entries(styles)) { el.style[kk] = vv; } } function hoverOpacity(el) { el.addEventListener('mouseenter', function() { el.style.opacity = 0.75 }.bind(el)); el.addEventListener('mouseleave', function() { el.style.opacity = 1 }.bind(el)); } // return void event handler on setTimeout function buffer(func, time){ return e=>{ if(func.still)return; // first runtime if(!func.pft){ func(e); func.pft = true; func.still = false; return; } func.still = true; setTimeout(e=>{ func(e); func.still = false; }, time); } } // end of common const imageUploadButton = document.getElementById('image-upload-button'); imageUploadButton.addEventListener('click', e=>{ // pulse animation total time const d1 = document.getElementById('image-form'); let time = 600; if(d1.rendered){ d1.ready(); }else{ d1.ready = function(){ d1.style.display = 'flex'; d1.style.background = '#c5edd0'; this.d2.style.background = '#b4dbbf'; this.d3.style.background = '#95dea9'; this.d4.innerHTML = 'Drag and Drop or Click Above to Upload'; } let dismiss_btn = document.createElement('div'); render_element({ position: 'absolute', height: '30px', width: '30px', top: '0', right: '0', background: '#fff', borderRadius: '30px', cursor: 'pointer', margin: '2px', zIndex: '10', }, dismiss_btn); dismiss_btn.addEventListener('mouseenter', function(){this.style.background = '#fc4f30'}); dismiss_btn.addEventListener('mouseleave', function(){this.style.background = '#fff'}); dismiss_btn.addEventListener('click', ()=>{d1.style.display = 'none'}); d1.appendChild(dismiss_btn); const d3 = d1.querySelector('#image-input'); const d5 = d1.querySelector('#image-submit'); d5.style.visibility = 'hidden'; d1.parentNode.removeChild(d1); document.body.appendChild(d1); d1.removeChild(d3); let [ d2, d4, ] = Array.from({length: 3}, ()=>document.createElement('div')); let width = window.innerWidth; let d_styles = { display: 'flex', justifyContent: 'center', alignItems: 'center', }; render_element({ position: 'fixed', left: ((width - 430) / 2).toString() + 'px', width: '430px', top: '60px', height: '280px', zIndex: '10', }, d1); render_element(d_styles, d1); render_element({ width: '90%', height: '90%', }, d2); render_element(d_styles, d2); render_element({ width: '80%', height: '70%', fontSize: '0', cursor: 'pointer', }, d3); hoverOpacity(d3); render_element(d_styles, d3); d1.appendChild(d2); d2.appendChild(d3); let tt = time / 3; let ht = tt / 2; d1.addEventListener('dragover', buffer(e=>{ d1.style.background = '#ebf9f0'; setTimeout(()=>{ d1.style.background = '#95dea9'; }, ht); setTimeout(()=>{ d2.style.background = '#b6e3c2'; setTimeout(()=>{ d2.style.background = '#c4eed2'; }, ht); }, tt); setTimeout(()=>{ d3.style.background = '#cae3d1'; setTimeout(()=>{ d3.style.background = '#9ce2b4'; }, ht); }, tt); }, time)); d2.style.flexDirection = 'column'; render_element({ fontSize: '16px', textAlign: 'center', fontFamily: 'Verdana', }, d4); d2.appendChild(d4); d3.addEventListener('change', e=>{ // backend // d5.click(); // if backend succeed, run frontend setTimeout(()=>{ d1.style.background = '#dbcea2'; setTimeout(()=>{ d2.style.background = '#dbc169'; setTimeout(()=>{ d3.style.background = '#ebc034'; }, ht); }, tt); }, time); // display backend path here // now only display filename d4.innerHTML = d3.files[0].name; }); d1.d2 = d2; d1.d3 = d3; d1.d4 = d4; d1.ready(); d1.rendered = true; } }); #image-upload-button{ width: 200px; height: 40px; background: lightgrey; display: flex; align-items: center; justify-content: center; cursor: pointer; } #image-form{ display: none; } ::-webkit-file-upload-button { visibility: hidden; } <div id="image-upload-button">Upload Image <form id="image-form" action="post"> <input id="image-input" type="file" /> <button id="image-submit" type="submit"></button> </form> </div>

这种方法为您提供了完全的灵活性!ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

这隐藏了输入文件按钮，但实际上是从另一个普通按钮点击它，显然您可以像设置其他按钮一样设置它的样式。这是除了无用的dom节点之外没有任何缺点的唯一解决方案。多亏了display:none;，输入按钮在DOM中不保留任何可见空间。

(我已经不知道该支持谁了。但我是从Stackoverflow网站的某个地方得到这个想法的。)