1.修改上传文件 input 的样式。(利用position + opacity 属性完成)
<button type="button">
上传文件
<input type="file">
</button>
<div class="img-wrap">
<img src="" alt="">
</div>
button {
width: 80px;
height: 35px;
display: block;
overflow: hidden;
border: none;
background: #1AAD19;
outline: none;
box-shadow: 0px 0px 2px #147c13;
transition: ease-out .2s;
cursor: pointer;
font-size: 12px;
color: #fff;
}
button:active {
background: #178f16;
box-shadow: inset 0px 0px 20px #147c13;
}
button input[type="file"] {
height: 35px;
width: 80px;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
2.原生input的一些方法
//使用的jq
$('input').on('change',function(){
var file = $('input').get(0).files[0];//转化为原生对象
console.log('所选文件的路径:' + $(this).val());//所选文件的路径
console.log('所选文件的信息:');//所选文件的信息
console.log(file);//所选文件的信息
console.log('文件名：' + file.name);//文件名
console.log('文件大小：' + file.size);//文件大小
console.log('文件大小：' + Math.ceil(file.size/1024) + 'kb');//转换为kb
console.log('文件名：' + file.type);//文件类型
//FileReader 对象
//对象事件 与方法
var fReader1 = new FileReader();//创建文件阅读对象
var fReader2 = new FileReader();//创建文件阅读对象
var fReader3 = new FileReader();//创建文件阅读对象
fReader1.readAsDataURL(file);//使用返回值为base64文件地址的方法阅读文件
fReader2.readAsBinaryString(file);//使用返回值为二进制资源的方法阅读文件
fReader3.readAsText(file);//使用返回值为文件内容的方法阅读文件
fReader1.onloadstart = function(){
console.log('开始');
};
fReader1.onerror = function(){
console.log('错误');
};
fReader1.onprogress = function(){
console.log('正在阅读');
};
fReader1.onload = function(){
console.log('成功');
console.log(fReader1);//base64
console.log(fReader2);
console.log(fReader3);
//通过将base64地址赋予给img，可以达到选取的图片文件显示在浏览器上
var base64url = fReader1.result;
$('img').attr('src',base64url);
};
fReader1.onloadend = function(){
console.log('结束');//无论成功与否
};
fReader1.onabort= function(){
console.log('中止');
};
});
7.png
