文章目录
文件上传样式
原生样式
<input type="file" id="naive_upload">
自定义样式
原理: 隐藏input原生按钮,并通过其他与其关联的标签覆盖它,从而达到相同效果,关联标签可以是label或者伪元素
<div id="new">
<input type="file" id="new_upload">
<label for="new_upload">点击上传图片显示</label>
</div>
<style>
#new{
position: relative;
width: 100px;
height: 30px;
border-radius: 15px;
background-color: red;
text-align: center;
line-height: 30px;
}
#new:hover{
background-color: hotpink;
}
#new_upload{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: cyan;
opacity: 0;
}
</style>
拖拽上传
使用拖拽上传的事件监听文件,需要用到的有ondragover, ondragenter, ondragleave, ondrop
<div id="drag" style="width: 200px;height: 200px;background-color: cyan;text-align: center;border:1px dashed red;">
请将文件拖拽到此区域</div>
var box = document.getElementById('drag')
box.ondrop = function(ev){
box.innerHTML = '请将文件拖拽到此区域';
return false; // 阻止默认跳转事件
}
box.ondragover = function(e){
return false; //阻止默认跳转事件,并由于在里面ondragover会频繁触发,ondrop无法执行
}
box.ondragenter = function(){
box.innerHTML = '请释放鼠标';
}
box.ondragleave = function(){
box.innerHTML = '请将文件拖拽到此区域'
};
上传图片同时展示图片
由于访问e.currentTarget.value得到的路径为带有fakepath的路径,如C:\fakepath\test.jpg,前端使用不了这个路径。
createObjectURL
使用createObjectURL类似方法得到,不同的浏览器支持不同
// html
//<input type="file" id="naive_upload">
//<img src="" alt="" id="newimage">
document.getElementById('naive_upload').onchange = function(e){
//console.log(e.currentTarget.files[0])
//console.log(e.currentTarget.value)
var url = getURL(e.currentTarget.files[0])
document.getElementById('newimage').src = url
}
//转换函数
function getURL(file) {
var url = null;
if(window.createObjcectURL != undefined) {
url = window.createOjcectURL(file);
} else if(window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
FileReader方法
FileReader对象的功能 : 读取文件内容 (异步)
readAsText() 读取文本文件,(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件,返回二进制字符串
readAsDataURL: 方法可以将读取到的文件编码成DataURL
abort: 中断读取
FileReader对象的事件:
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发
onloadend:文件读取完毕之后,不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发
一般触发过程为onloadstart>onprogress>onload>onloadend
// 使用 监听input标签的onchange事件 或者 拖拽事件ondrop
document.getElementById('new_upload').onchange = function(e){
var reader = new FileReader();
reader.readAsDataURL(e.currentTarget.files[0],'base64');
//读取成功事件