当要通过控件来选择本地文件上传的时候的一种方式
<input type="file" id="input-file"/> 注意 type类型一定要是 file
当年选择文件之后，就用 this.file[0] 来获得文件的基本信息
下面为项目中的应用
?????html
????<div class="upload-button"> ???????????????<span style="position: absolute;text-align: center;width: 135px;left:0;">上传封面图片</span> ???????????????<input type="file" id="input-file"/> ????</div>
js
// ???????获取本地图片信息 ???????$("#input-file").on("change", function() {// ???????????this.file[0] 得到文件的基本信息 ???????????var fileName = this.files[0].name; ???????????var url = ‘img/‘+fileName ???????????// 打印原始File对象 ???????????console.log(fileName) ???????????console.log(url);
打印出来的数据为
再要注意的就是input框的样式真的不好看啊，如需要改变样式就要加CSS，一定要把input样式定位 position:absolute ,透明度为0，再用一个span标签覆盖起来
.upload-button{ ???position: relative; ???float: right; ???background: #fa4a5f; ???height: 40px; ???font-size: 19px; ???color:#fff; ???width: 135px; ???line-height: 40px; ???text-align: center; ???margin-top:25px; ???border-radius:20px; ???box-shadow:#fa4a5f 0 0 30px; ???cursor: pointer; ???overflow: hidden; ???display: inline-block;}#input-file{ ????opacity: 0; ????position: absolute; ????cursor: pointer;}效果图如下
选择本地文件上传控件 input标签
原文地址：https://www.cnblogs.com/xxflz/p/9457079.html