input type=file 选择图片并且实现预览效果的实例

最新推荐文章于 2023-04-13 10:59:07 发布

转载最新推荐文章于 2023-04-13 10:59:07 发布 · 698 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML与JavaScript实现图片预览的方法。通过设置input标签的type为file，并结合FileReader API，可以在用户选择图片后立即在网页上显示预览效果。

为大家带来一篇input type=file 选择图片并且实现预览效果的实例。

通过<input />标签，给它指定type类型为file，可提供文件上传；

accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；

multiple：规定是否可以选择多个文件；

规定只可上传图片，且可以选择多个文件

<input type="file" accept="image/*" multiple="multiple"/>

当然，直接一个input type=file 只能选择上传的文件/资源，如果我们需要在选择图片之后，在当前页面实现预览效果，那么我们可以如下方式来实现

<body>
    <style>
        #box {
            width: 300px;
            height: 300px;
            border: 2px solid #858585;
        }

        #imgshow {
            width: 100%;
            height: 100%;
        }

        #pox {
            width: 70px;
            height: 24px;
            overflow: hidden;
        }
    </style>
    <div id="box">
        <img id="imgshow" src="" alt="" />
    </div>
    <div id="pox">
        <input id="filed" type="file" accept="image/*" />
    </div>
    <script language="JavaScript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js?rand=1525249087392"></script>
    <script>
        $(document).ready(function () {
            //在input file内容改变的时候触发事件
            $('#filed').change(function () {
                //获取input file的files文件数组;
                //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
                //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = $('#filed').get(0).files[0];
                //创建用来读取此文件的对象
                var reader = new FileReader();
                //使用该对象读取file文件
                reader.readAsDataURL(file);
                //读取文件成功后执行的方法函数
                reader.onload = function (e) {
                    //读取成功后返回的一个参数e，整个的一个进度事件
                    console.log(e);
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                    //的base64编码格式的地址
                    $('#imgshow').get(0).src = e.target.result;
                }
            })
        });
    </script>
</body>