您的位置：首页 > Web前端 > HTML5

html5指南--5.拖拽文件

2015-06-06 12:58 627 查看

html5指南--5.拖拽文件

html5支持file api，可以让我们操作本地文件。一般我们不直接使用file api，我们可以结合其他特性一起使用，比如结合拖拽特效，如下例：
<!DOCTYPE HTML>

<html>

<head>

    <title>Example</title>

    <style>

        body > *

        {

            float: left;

        }

        #target

        {

            border: medium double black;

            margin: 4px;

            height: 75px;

            width: 200px;

            text-align: center;

            display: table;

        }

        #target > p

        {

            display: table-cell;

            vertical-align: middle;

        }

        table

        {

            margin: 4px;

            border-collapse: collapse;

        }

        th, td

        {

            padding: 4px;

        }

    </style>

</head>

<body>

    <div id="target">

        <p id="msg">

            Drop Files Here</p>

    </div>

    <table id="data" border="1">

    </table>

    <script>

        var target = document.getElementById("target");

        target.ondragenter = handleDrag;

        target.ondragover = handleDrag;
        function handleDrag(e) {

            e.preventDefault();

        }
        target.ondrop = function (e) {

            var files = e.dataTransfer.files;

            var tableElem = document.getElementById("data");

            tableElem.innerHTML = "<tr><th>Name</th><th>Type</th><th>Size</th></tr>";

            for (var i = 0; i < files.length; i++) {

                var row = "<tr><td>" + files[i].name + "</td><td>" + files[i].type + "</td><td>" + files[i].size + "</td></tr>";

                tableElem.innerHTML += row;

            }

            e.preventDefault();

        }

    </script>

</body>

</html>

DataTransfer返回FileList对象，我们可以把他当做file数组对象，file包含下面属性：name：文件名字；type：文件类型（MIME类型）；size：文件大小。
运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航