HTML上传预览图片

• 2018-05-12
• 0
• 0

今天做一功能就是网页上传图片,可以实时预览.

选择图片之后,下面显示图片.

之前我是先ajax上传到服务器拿到图片URL.在显示在下面.但这样有一弊端.如果用户又替换了图片,那么之前那次上传的就白费了.

那如何实现不上传就能显示图片呢?

可以使用HTML5提供的FileReader文件API.

关于具体的FileReader使用可以在百度上搜索.

下面放出我实现的方法.仅供参考(我不是专业的前端工程师,样式直接用的Bootstrap,还用到了JQ)

<form action="" method="post" role="form" enctype="multipart/form-data">
    <legend>添加轮播图</legend>
    <div class="col-sm-12">
        <div class="input-group">
            <input type="file" name="file" id="file" onchange="upImagePc(this)" class="form-control" value="" title="" required="required">
        </div>
        <div class="input-group" style="margin-top:5px;">
            <img src="/hdjs/static/image/nopic.jpg" id="image" class="img-responsive img-thumbnail" height="600">
        </div>
    </div>

    <script>
        function upImagePc(obj) {
            var imgFile = obj.files[0];
            console.log(imgFile);
            var fr = new FileReader();
            fr.onload = function() {
                $('#image').attr('src',fr.result);
            };
            fr.readAsDataURL(imgFile);
        }

    </script>
    <div class="col-sm-12" style="margin-top: 20px">
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>

看下效果:

很完美的实现了,无需上传实时预览的功能.