HTML5编程实战之三-图片文本(txt)拖拽预览实现代码


本文摘自PHP中文网,作者黄舟,侵删。

本文主要用到的知识

  HTML5中的File及FileReader接口

源码

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

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<!DOCTYPE html><html><head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>HTML5文件拖拽预览Demo</title>

    <style type="text/css">

        h1{

            padding:0px;

            margin:0px;

        }

        p#show{

            border: 1px solid #ccc;

            width: 400px;

            height: 300px;

            display: -moz-box;

            display: -webkit-box;

            -moz-box-align: center;

            -webkit-box-align: center;

            -moz-box-pack: center;

            -webkit-box-pack: center;

            resize:both;

            overflow:auto;

        }

        p[id^=show]:hover{

            border: 1px solid #333;

        }

        p#main{

            width:100%;

        }

        p#successLabel        {

            color:Red;

        }

        p#content        {

            display:none;

        }

    </style>

    <script type="text/javascript">

        function init()

        {            var dest = document.getElementById("show");

            dest.addEventListener("dragover", function(ev)

            {

                ev.stopPropagation();

                ev.preventDefault();

            }, false);

         

            dest.addEventListener("dragend", function(ev)

            {

                ev.stopPropagation();

                ev.preventDefault();

            }, false);

         

            dest.addEventListener("drop", function (ev) {

                ev.stopPropagation();

                ev.preventDefault();       

                var file = ev.dataTransfer.files[0];               

                var reader = new FileReader();       

                if (file.type.substr(0, 5) == "image") {

                    reader.onload = function (event) {

                        dest.style.background = 'url(' + event.target.result + ') no-repeat center';

                        dest.innerHTML = "";

                    };

                    reader.readAsDataURL(file);

                }                else if (file.type.substr(0, 4) == "text") {

         

                    reader.readAsText(file);

                    reader.onload = function (f) {

                        dest.innerHTML = "<pre>" + this.result + "</pre>";

                        dest.style.background = "white";

                    }

                }                else {

                    dest.innerHTML = "暂不支持此类文件的预览";

                    dest.style.background = "white";

                }

            }, false);

        }       

        //设置页面属性,不执行默认处理(拒绝被拖放)       

        document.ondragover = function(e){e.preventDefault();};

        document.ondrop = function(e){e.preventDefault();}

         

        window.onload=init;   

        </script></head><body>

    <h1>HTML5文件拖拽预览Demo</h1>

    <p id="show">

    文件预览区,仅限图片和txt文件   

    </p></body></html>

主要代码解析

  样式部分就不说了,很简单

  dragover、dragend、drop是三个与拖拽相关的事件。

  dragover表示被拖放的元素正在本元素范围内移动

  dragend表示拖放操作结束

  drop表示有其他元素被拖放到了本元素中

  代码中先分别监听这几个事件,取消浏览器默认的行为,然后利用HTML5中的File及FileReader判断读取拖拽的文件。

  如果文件是图片,就用FileReader的readAsDataURL方法将图片读取为DataURL字符串存入内存,并显示在p中。

  如果文件是txt文本,就用FileReader的readAsText方法将文件读取为文本(默认为UTF-8格式),放到内存中,然后显示在p中。

以上就是HTML5编程实战之三-图片文本(txt)拖拽预览实现代码的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

如何选择web前端模板引擎(推荐)

浅谈HTML5和html4之间的不同

基于HTML5的web scada报表的图文代码分析

关于移动端h5开发相关内容总结

HTML5实践-使用css3如何完成google涂鸦动画的详解

HTML5 video怎么停止播放视频

canvas如何实现二维码和图片合成的代码

HTML5语义化总结

HTML5使用canvas压缩图片的示例代码

html中序列化标签的简单介绍(代码实例)

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...