html5 js 图片上传预览

最新推荐文章于 2023-12-05 15:28:57 发布

暮志未晚NAN

最新推荐文章于 2023-12-05 15:28:57 发布

阅读量1k

点赞数

分类专栏： html5 javascript 文章标签： html5 javascript 图片

本文链接：https://blog.csdn.net/qq_30100043/article/details/52912727

版权

javascript 同时被 2 个专栏收录

73 篇文章 2 订阅

订阅专栏

html5

46 篇文章 3 订阅

订阅专栏

首先获取显示图片的位置和input的对象，判断浏览器是否兼容

		var img = document.getElementById("img");
		var file = document.getElementById("file");
		if(!(window.FileReader && window.File && window.FileList && window.Blob)) {
			img.alt = '您的浏览器不支持fileReader';
		}

然后给input绑定变动事件

		file.addEventListener('change', function(e){
		    var files = this.files;
		    if(files.length){
		        // 对文件进行处理，下面会讲解checkFile()会做什么
		        checkFile(this.files);
		    }
		});

设置处理

		// 图片处理
		function checkFile(files){
		    var file = files[0];
		    var reader = new FileReader();
		    // show表示<div id='show'></div>，用来展示图片预览的
		    if(!/image\/\w+/.test(file.type)){
		        show.innerHTML = "请确保文件为图像类型";
		        return false;
		    }
		    // onload是异步操作
		    reader.onload = function(e){
		        //show.innerHTML = '<img src="'+e.target.result+'" alt="img">';
		        img.src = e.target.result;
		    }
		    reader.readAsDataURL(file);
		}

下面是一个案例，我简单封装了一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="file" id="myfile">
    <img src="" id="mypic" alt="">
    <script type="text/javascript">
        function change_pic(img_id, file_id) {
            var img = document.getElementById(img_id);
            var file = document.getElementById(file_id);
            if (!(window.FileReader && window.File && window.FileList && window.Blob)) {
                img.alt = '您的浏览器不支持fileReader';
            }
            file.addEventListener('change', function(e) {
                var files = this.files;
                if (files.length) {
                    // 对文件进行处理，下面会讲解checkFile()会做什么  
                    checkFile(this.files);
                }
            });
            // 图片处理  
            function checkFile(files) {
                var file = files[0];
                var reader = new FileReader();
                // show表示<div id='show'></div>，用来展示图片预览的  
                if (!/image\/\w+/.test(file.type)) {
                    show.innerHTML = "请确保文件为图像类型";
                    return false;
                }
                // onload是异步操作  
                reader.onload = function(e) {
                    //show.innerHTML = '<img src="'+e.target.result+'" alt="img">';  
                    img.src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        }
        change_pic("mypic", "myfile");
        //调用方法，change_pic(图片id，文件选择iput框id);

    </script>
</body>

</html>

暮志未晚NAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 js 图片上传预览

首先获取显示图片的位置和input的对象，判断浏览器是否兼容 var img = document.getElementById("img"); var file = document.getElementById("file"); if(!(window.FileReader && window.File && window.FileList && window.Blob))
复制链接

扫一扫

专栏目录