简单的前端上传图片代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>

    <style type="text/css">
    /*
    css
     */
    #fileimg{
        width:200px;
        height:200px;
        border:1px solid #eee;
    }
    .Btn{
        width:100px;
        background: #4BCD61;
        border: 0px;
    }
    </style>
    <script type="text/javascript">
    //JS
    function fileClick() {
    document.getElementById('file').click()
    }//触发一个触发浏览事件，没有的话点击button就不会出现选择框了

    function upCh(file){
        let img = document.getElementById('fileimg')
    let formData = new FormData()
    let imgUrl = file.files[0];
    if (imgUrl){
        formData.append('file',imgUrl);
        imgUrl.src = window.URL.createObjectURL(imgUrl)//window.URL.createObjectURL预览图片
       /*
        这里可以写上传到后端代码
        */
    }
}

    </script>

</head>
<body>
<input type="file" id="file" name="" onchange="upCh(this)" />
<br />
<img id="fileimg" src="" />
<br />
<button class="Btn" onclick="fileClick()">上传图片</button>
</body>
</html>

此代码可以复制粘贴看看运行效果，十分简单

相关阅读:
centos7修改服务端口（ssh为例）
VLAN基础知识
三层交换机与路由器区别
冲突域和广播域的区分
LAN口和WAN口的区别是什么？
内网穿透frp
linux bash中too many arguments问题的解决方法
linux日志
linux服务管理
OSPF 多区域配置实验

原文地址：https://www.cnblogs.com/ellen-mylife/p/10638704.html