html5实现上传图片预览

更多时间：2015-3-29 类别：Web前端浏览量：1409

html5实现上传图片预览

html5实现上传图片预览

在HTML5中，通过FileReader可以轻松的实现这个功能。

只要在<input type="file" />文件表单元素中监听 onchange 事件，然后通过FileReader读取图片文件，然后将读取的内容在<img>中显示即可。

实现代码

复制


<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<meta name="author" content="EdieLei" />

<title>HTML5 图片上传预览</title>

<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>

<script type="text/javascript">...

$(function()...{

    $('#img').change(function()...{

        var file = this.files[0];    //选择上传的文件

        var r = new FileReader();

        r.readAsDataURL(file);    //Base64

        $(r).load(function()...{

            $('li').html('<img src="'+ this.result +'" alt="" />');

        });

    });

});

</script>

</head>

<body>

<h3>HTML5 图片上传预览</h3>

<input id="img" type="file" accept="image/*" /><br />

<li></li>

</body>
</html>

标签：上传图片

上一篇：linq xml 查询

下一篇：table 细边框

您可能感兴趣

html5实现上传图片预览

html5实现上传图片预览

热门推荐

排行榜