HTML5 上传文件极简示例

最新推荐文章于 2021-06-09 21:35:20 发布

lightspear

最新推荐文章于 2021-06-09 21:35:20 发布

阅读量996

点赞数 2

分类专栏： HTML5 文章标签： HTML5 上传文件带进度

本文链接：https://blog.csdn.net/lightspear/article/details/46486657

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5 的来临让Web开发者上传文件去服务端变得异常简单，马上就贴出我的极致简单的一个HTML代码来领略其魅力，代码简单易懂。

如果像更加深入了解HTML5上方面的全部API，我推荐http://html5index.org/这个网站，可以好好查查API

还有这个网站https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest，非常详细的API。

下面我简单贴一个我自己极简DEMO

注意：浏览器支持chrome,IE11,以及大部分支持html5的浏览器,低版本IE就不要想了肯定不支持。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script>
        function funUploadFile(file) {
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                // 上传中
                xhr.upload.addEventListener("progress", function (e) {
                    var percent = (e.loaded / e.total * 100).toFixed(2) + '%';
                    console.log(percent);
                }, false);
                // 文件上传成功或是失败
                xhr.onreadystatechange = function (e) {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            //xhr.responseText//
                            alert("上传完成");

                        } else {



                        }
                    }
                };

                xhr.open("POST", "Upload.ashx", true);
                //
                var fd = new FormData(); // html5新增的对象,可以包装字符,二进制信息 
                fd.append(file.name, file);
                fd.append("ID", "123");//带一个post参数
                xhr.send(fd);
                //
            }
        }
        //利用call是this代表input对象简化处理
        function change()
        {
            var files = this.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                funUploadFile(file);
            }
        }
    </script>
</head>
<body>
    <input  type="file" οnchange="change.call(this);" multiple=""/>
</body>
</html>