原生JS实现异步图片上传（预览）

Posted 2021-01-09 吃饭睡觉打豆豆

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现异步图片上传（预览）相关的知识，希望对你有一定的参考价值。

效果

实现过程分为两步

1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片

2. 通过FormData对象生成表单数据，通过ajax上传到后台

<style>
    .file-box{display: inline-block;position: relative;padding: 3px 5px;overflow: hidden;color:#fff;background-color: #ccc;}
    .file-btn{position: absolute;width: 100%;height: 100%;top: 0;left: 0;outline: none;background-color: transparent;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
    .prev-box{display: inline-block; min-width: 200px;min-height: 120px;border-radius: 5px;padding: 5px;border:1px #ccc dotted;}
</style>
<body>
    <form id="form1">
        <div class="file-box">
            <input type="file" class="file-btn" onChange="uploadImg(this)" accept="image/*" name="image"/>
            上传文件
        </div>
        <br>
        <div class="prev-box" id="prev-box">
            <img style="width: 200px;" id="img">
        </div>
        <div id="uploadMsg" style="color: #f00"></div>
    </form>
</body>

function uploadImg(obj){
    //1. 图片预览
    //如果浏览器不支持 FileReader 则用文字提示
    if(typeof FileReader == \'undefined\'){
        var prevBox = document.getElementById(\'prev-box\')
        prevBox.innerHTML = "浏览器不支持预览"
    }else{
        //获取上传文件，返回 File对象
        var file = obj.files[0];
        var reader = new FileReader()
        //注册读取成功的回调函数
        reader.onload = function (e) {
            var img = document.getElementById("img");
            img.src = e.target.result;
        }
        //开始以 DataURL格式读取文件
        reader.readAsDataURL(file)
    }

    //2. 图片上传
    if(typeof FormData == \'undefined\'){
        alert(\'浏览器不支持图片上传\')
    }else{
        var form = document.getElementById(\'form1\')
        var data = new FormData(form)
        //添加自定义字段
        data.append("CustomField", "This is some extra data")
        //ajax请求
        var httpRequest = new XMLHttpRequest();
        httpRequest.open("POST", "upload.php", true);
        httpRequest.onload = function(oEvent) {
            if (httpRequest.status == 200) {
                //服务器返回的保存路径
                console.log(httpRequest.responseText)
            } else {
                document.getElementById(\'uploadMsg\').innerHTML = \'图片上传失败，错误码:\' + httpRequest.status
            }
        };
        httpRequest.send(data);
    }

}