跳至主要内容

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>
标签：

评论

发表评论

此博客中的热门博文

android hide actionbar

public class MainActivity extends Activity { ActionBar actionBar; //声明ActionBar @Override protected void onCreate( Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView( R .layout.activity_main); actionBar = getSupportActionBar(); //得 到ActionBar actionBar.hide(); //隐藏ActionBar } }
发表评论
阅读全文

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.
发表评论
阅读全文