当要通过控件来选择本地文件上传的时候的一种方式
<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[].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 30px;
cursor: pointer;
overflow: hidden;
display: inline-block;
}
#input-file{
opacity: ;
position: absolute;
cursor: pointer;
}
效果图如下