首页 / 未分类 / html上传图片之前在网页预览实现

html上传图片之前在网页预览实现

html上传图片之前在网页预览实现 2016年7月26日不静之心未分类

html上传图片之前在网页预览实现

HTML5之FileReader的使用 http://blog.csdn.net/jackfrued/article/details/8967667

原文：http://my.oschina.net/rst/blog/638135

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Html代码

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>preview image</title>

</head>

<body>

<form>

<input type="file">

</form>

<script src="/static/js/jquery.min.js"></script>

<script>

$('input[type="file"]').change(function(e){

reader = new FileReader();

reader.readAsDataURL(e.target.files[0]);

reader.onload = function(){

$('body').append($('<img />', {src: reader.result}));

};

});

</script>

</body>

</html>

发表评论取消回复