html5指南--6.上传文件

最新推荐文章于 2022-11-07 15:55:07 发布

想旅游咯

最新推荐文章于 2022-11-07 15:55:07 发布

阅读量272

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

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

想旅游咯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5指南--6.上传文件

html5指南--6.上传文件下面介绍一个通过拖拽ajax上传文件的实例。 Example .table { display: table; } .row { display: table-row;
复制链接

扫一扫