文件上传

孤城幻夜

于 2015-09-24 16:04:31 发布

阅读量317

点赞数

分类专栏： JAVAEE

本文链接：https://blog.csdn.net/wojiaoguchenghuanye/article/details/48712557

版权

JAVAEE 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

    <title>Html5 Ajax 上传文件</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script src="javascript/jquery-1.8.0.min.js"></script>
    <style type="text/css">  
        .processcontainer{  
           width:450px;  
           border:1px solid #6C9C2C;  
           height:25px;  
           background:white; 
           margin-top:80px;
         } 
        #processbar{  
           background:#95CA0D;  
           float:left; 
           height:100%;  
           text-align:center;  
           line-height:100%; 
         }  
          .topdiv {
            display: block;
            position: absolute;
            top: 100px;
            left: 100px;
            width: 460px;
            height: 200px;
            line-height:200px;
            text-align:center;
            padding: 20px;
            border:1px solid black;
            background-color: #3C90CC;
            z-index:1002;
            overflow: hidden;
        }
</style> 
    <script type="text/javascript">
        var i=0;


        function UpladFile() {



            var fileObj = document.getElementById("file").files[0]; // 获取文件对象

            var file_path = "upload_file\\save";                    // 接收上传文件的后台地址 



            // FormData 对象

            var form = new FormData();

            form.append("author", "hooyes");                        // 可以增加表单数据

            form.append("file", fileObj);                           // 文件对象



            // XMLHttpRequest 对象

            var xhr = new XMLHttpRequest();

            xhr.open("post", "upLoadDemoServlet?path="+file_path, true);

            xhr.upload.addEventListener("progress", progressFunction, false);

            xhr.onload = function () {

                alert("上传完成!");

            };

            xhr.send(form);

        }

        function progressFunction(evt) {


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

            if (evt.lengthComputable) {

                processbar.style.width =  Math.round(evt.loaded / evt.total * 100) + "%";
                processbar.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

            }

        }  

        function showOrHide(flag) {
            if(flag == 1) {
                 $("#top").css('display','block');
           }
           /* if(flag == 2) { 
               $("#top").css('display','none');
               $("#below").css('display','none');
               i=0;
          } */
        }
</script>

</head>

<body>
<div d="top" class="topdiv">
    <div class="processcontainer">
        <div id="processbar" style="width:0%;"></div>
    </div>
</div>
<br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="showOrHide(1);UpladFile()" value="上传" />

</body>

</html>