借助html5实现上传图片预览

发布时间：2023-11-08 11:03:06 所属栏目：教程来源：网络

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

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

　　在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="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(){

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

　　        });

　　    });

　　});

　　</script>

　　</head>

　　<body>

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

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

　　<div></div>

　　</body>

　　</html>

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!