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

html5指南--6.上传文件

2015-06-06 12:56 597 查看

html5指南--6.上传文件

下面介绍一个通过拖拽ajax上传文件的实例。
<!DOCTYPE HTML>

<html>

<head>

    <title>Example</title>

    <style>

        .table

        {

            display: table;

        }

        .row

        {

            display: table-row;

        }

        .cell

        {

            display: table-cell;

            padding: 5px;

        }

        .label

        {

            text-align: right;

        }

        #target

        {

            border: medium double black;

            margin: 4px;

            height: 50px;

            width: 200px;

            text-align: center;

            display: table;

        }

        #target > p

        {

            display: table-cell;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <form id="fruitform" method="post" action="/UploadHandler.ashx">

    <div class="table">

        <div class="row">

            <div class="cell label">

                Bananas:</div>

            <div class="cell">

                <input name="bananas" value="2" /></div>

        </div>

        <div class="row">

            <div class="cell label">

                Apples:</div>

            <div class="cell">

                <input name="apples" value="5" /></div>

        </div>

        <div class="row">

            <div class="cell label">

                Cherries:</div>

            <div class="cell">

                <input name="cherries" value="20" /></div>

        </div>

        <div class="row">

            <div class="cell label">

                File:</div>

            <div class="cell">

                <input type="file" name="file" /></div>

        </div>

        <div class="row">

            <div class="cell label">

                Total:</div>

            <div id="results" class="cell">

items</div>

        </div>

    </div>

    <div id="target">

        <p id="msg">

            Drop Files Here</p>

    </div>

    <button id="submit" type="submit">

        Submit Form</button>

    </form>

    <script type="text/javascript">

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

        var httpRequest;

        var fileList;
        target.ondragenter = handleDrag;

        target.ondragover = handleDrag;

        function handleDrag(e) {

            e.preventDefault();

        }

        target.ondrop = function (e) {

            fileList = e.dataTransfer.files;

            e.preventDefault();

        }
        document.getElementById("submit").onclick = function handleButtonPress(e) {

            e.preventDefault();
            var form = document.getElementById("fruitform");

            var formData = new FormData(form);

            if (fileList) {

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

                    formData.append("file" + i, fileList[i]);

                }

            }
            httpRequest = new XMLHttpRequest();

            httpRequest.onreadystatechange = handleResponse;

            httpRequest.open("POST", form.action);

            httpRequest.send(formData);

        }

        function handleResponse() {

            if (httpRequest.readyState == 4 && httpRequest.status == 200) {

                var data = JSON.parse(httpRequest.responseText);

                document.getElementById("results").innerHTML = "You ordered " + data.total + " items";

            }

        }

    </script>

</body>

</html>

效果：

　　上面的一些例子不同浏览器运行效果可能不同，我用的是chrome浏览器，除了例5和6不支持多文件外，其他例子运行正常。大家可以下载demo。
　　demo下载地址：Html5Guide.draggable.rar

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

标签：

相关文章推荐

新的分享

章节导航