跳至主要内容

javascript upload file with progress bar (xml request)

<!DOCTYPE html>
<html>
<head>
<title>my title</title>
<meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1">
<script type="text/javascript">
function up() {
        if (document.getElementById("f").value == "") {
            document.getElementById("result").innerHTML = "请选择文件";
        }
        else {
            var fileObj = document.getElementById("f").files[0];
            //创建xhr
            var xhr = new XMLHttpRequest();
            var url = "uploadFile";
            //FormData对象
            var fd = new FormData();
            fd.append("path", "D:\\");    //上传路径
            fd.append("file", fileObj);
            fd.append("acttime",new Date().toString());    //本人喜欢在参数中添加时间戳，防止缓存（--、）
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    document.getElementById("result").innerHTML = result;
                }
            }
            //进度条部分
            xhr.upload.onprogress = function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    document.getElementById('progress').value = percentComplete;
                    document.getElementById('progressNumber').style.width = percentComplete + "px";
                }
            };
            xhr.open("POST", url, true);
            xhr.send(fd);
        }
    }
</script>
</head>
<body>
<center>
<input type="file" id="f" />
    <br />  
    <input type="button" value="up" onclick="up()" />
    <br />
    <!--进度条标签-->
    <progress value="0" max="100" id="progress" style="height: 20px; width: 100%"></progress>
    <br />
    <!--div模拟进度条-->
    <div id="progressNumber" style="width: 0px; height: 20px; background-color: red"></div>
    <br />
    <div id="result"></div>
</center>
</body>
</html>
标签：

评论

发表评论

此博客中的热门博文

javascript数组删除指定元素 remove index array specific

定义和用法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释： 该方法会改变原始数组。 语法 arrayObject.splice(index,howmany,item1,.....,itemX) 参数 描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。 返回值 类型 描述 Array 包含被删除项目的新数组，如果有的话。 说明 splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
发表评论
阅读全文

go url encoding

func  QueryUnescape func QueryUnescape (s string ) ( string , error ) QueryUnescape does the inverse transformation of QueryEscape, converting %AB into the byte 0xAB and '+' into ' ' (space). It returns an error if any % is not followed by two hexadecimal digits. func  QueryUnescape func QueryUnescape (s string ) ( string , error ) QueryUnescape does the inverse transformation of QueryEscape, converting %AB into the byte 0xAB and '+' into ' ' (space). It returns an error if any % is not followed by two hexadecimal digits.
发表评论
阅读全文