jQuery实现本地input选择图片实时显示

在写图片上传功能时,如果可以实时预览就好了,我们可以通过 jQuery 实现这一效果。

为了更加美观,可以结合我之前写的一篇文章,给图片显示区域设置一个默认图片:HTML img src图片路径不存在,则显示一张默认图片的方法

HTML代码如下:

<p>
    <img class="img" src="" onerror="this.src='img/default.png'" width="100" height="100">
</p>
<input class="select" type="file">

效果如下图:

jQuery实现本地input选择图片实时显示 经验总结 第1张

JS代码:

input 按钮改变时,给 img 设置 src

<script>
    $('.select').change(function(e) {
        var _URL = window.URL || window.webkitURL;
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function() {
                $('.img').attr('src', this.src);
            };
            img.src = _URL.createObjectURL(file);
        }
    })
</script>

效果如下图:

jQuery实现本地input选择图片实时显示 经验总结 第2张

未经允许不得转载:Web前端开发资源网 » jQuery实现本地input选择图片实时显示

推荐阅读:

HTML引入文件的绝对路径、相对路径、根目录

html中引入调用另一个公用html模板文件的方法

jQuery.dotdotdot多行文本省略号插件的使用方法

新网站如何做好SEO优化 尽快被收录

给网站添加熊掌号粉丝关注按钮

赞 (6)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)