前端实现简单的图片上传小图预览功能

先看看效果：上传图片后：核心代码：var files=$(this)[0].files[0]; //获取文件信息var reader=new FileReader() //调用FileReaderreader.onload=function(evt){ //读取操作完成时触发o...

MT_su

9796人浏览 · 2018-09-04 23:05:03

MT_su · 2018-09-04 23:05:03 发布

先看看效果：

上传图片后：

核心代码：

var files=$(this)[0].files[0]; //获取文件信息

var reader=new FileReader() //调用FileReader

reader.οnlοad=function(evt){ //读取操作完成时触发onload函数。

$("#image").attr('src',evt.target.result) } //将img标签的src绑定为DataURL

reader.readAsDataURL(files) //将文件读取为 DataURL(base64)

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <title>Document</title>
    <style>
        .fileupload-box
        {
            padding: 5px;
            border: 2px dashed gainsboro;
            height: 180px;
            width: 400px;
            position: relative
        }
        .fileupload-box p
        {
            margin: 5px 0 0 5px;
            
        }
        .img-box{
            position: absolute;
            width: 120px;
            height: 120px;
            left: 0;
            right: 0;
            top: 10px;
            bottom: 0;
            margin:auto;
        }
        .img-box img{
            width: 120px;
            height: 120px;
        }

    </style>
</head>
<body>
        <div class="fileupload-box">
            <p>上传图片:</p>
            <div class="img-box">
                <input type="file"  style="display:none" id="uploadfile" accept="image/*"/>
                <img src="./fonts/addpic.png" id="image" >
            </div>
        </div>

        <script>
            $(function(){
                $("#image").click(function(){
            $("#uploadfile").click();
            })
            $("#uploadfile").change(function(){

                var files=$(this)[0].files[0];    //获取文件信息
                if(files)
                {
                    var reader=new FileReader();  //调用FileReader
                    reader.onload=function(evt){   //读取操作完成时触发。
                        $("#image").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                    }
                reader.readAsDataURL(files); //将文件读取为 DataURL(base64)
                }
                else{
                    alert("上传失败");
                }
            })
            })
        </script>
</body>
</html>

松山湖开发者村综合服务平台

助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台

更多推荐