前端场景5__文件上传(前端+后端)

文件上传样式

原生样式

<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');
    
    //读取成功事件