Input File 选中图片 直接预览显示在IMG标签内

本文主要是介绍Input File 选中图片 直接预览显示在IMG标签内，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

分享一个通过input file 实现预览 图片的功能

• 又是一个小知识，记笔记！！！

$("#fuPoster").change(function (event) {
        //根据这个 <input> 获取文件的 HTML5 js 对象
        var files = event.target.files, file;
        if (files && files.length > 0) {
            // 获取目前上传的文件
            file = files[0];
            // 来在控制台看看到底这个对象是什么
            console.log(file);
            // 那么我们可以做一下诸如文件大小校验的动作
            if (file.size > 1024 * 1024 * 5) {
                alert('图片大小不能超过 5MB!');
                return false;
            }
            // !!!!!!
            // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
            // 获取 window 的 URL 工具
            var URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            var imgURL = URL.createObjectURL(file);
            $("#imgPoster").attr("src", imgURL);
        }
    })

• 兄弟们，实现了预览后那么自然而然就能做一个换头像的功能了

思路是这样的，通过上面代码就已经预览到图片，那么就能获取到这个图片的src，那么就能把这个src替换掉需要替换的img上，分享到此结束。

这篇关于Input File 选中图片 直接预览显示在IMG标签内的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！