<form id="form" action="url" method="post" enctype= "multipart/form-data">
     <!--文件上傳部分-->
     <div id="filesUpLoad" class="">
          <input type="file" id="files" onchange="changes()" name="fileName" accept=".zip"/>
     </div>
     <div>
          <input type="button" id="submits" value="點(diǎn)擊上傳" disabled="disabled" onclick="subForm()"/>
     </div>

     <!--顯示文件信息和進(jìn)度條部分-->
     <div id="console" class="">
          <div class="hr" id="hr"></div>
          <div class="progress" id="progressNumber"></div>
          <div class="" id="fileName"></div>
          <div class="" id="fileSize"></div>
          <div class="" id="fileType"></div>
          <div id="close">
              <button onclick="closePage()">關(guān)閉</button>
          </div>
     </div>
     
</form>

<script type="text/javascript">
//選中文件或是文件發(fā)生改變時(shí)觸發(fā)
function changes(){
     document.getElementById("console").setAttribute("hidden","hidden");
     document.getElementById("progressNumber").setAttribute("hidden","hidden");
     document.getElementById("submits").setAttribute("disabled","disabled");
     //獲取文件對(duì)象
     var file = document.getElementById("files").files[0];
     //獲取文件大小(MB)
     var fsz = (Math.round(file.size*100/(1024*1024))/100).toString();
     //獲取文件全名.類型
     var fileName = file.name;     
     //獲取文件類型
     var ftp = fileName.substr(fileName.lastIndexOf('.')+1,fileName.length);
     /判斷文件類型是否匹配
     if(ftp=='js'){
          //判斷文件大小是否匹配
          if(fsz<5){
               document.getElementById("submits").removeAttribute("disabled");
               if(file){
                    var fileSize = 0;
                    if(file.size>1024*1024){
                         fileSize=fsz+"MB";
                    }else{
                         fileSize=(Math.round(file.size*100)/100).toString()+"KB";
                    }
                    document.getElementById("console").removeAttribute("hidden");
                    document.getElementById("hr").innerHTML ="<hr/>";
                    document.getElementById("fileName").innerHTML="文件名稱："+
                             fileName.substr(0,fileName.lastIndexOf('.'));
                    document.getElementById("fileSize").innerHTML="文件大?。?+fileSize;
                    document.getELementById("fileType").innerHTML="文件類型："+ftp;
               }
          }else{
               alert("文件大小超過(guò)5MB，請(qǐng)選擇小于5MB的相關(guān)文件！");
          }
     }else{
          alert("文件類型不匹配，請(qǐng)選擇相匹配的文件類型！");
     }
}

//上傳
function subForm(){
     //獲取項(xiàng)目全部路徑
     var s = window.location.href;
     //按自己的需求截取
     var ul = s.substr(0,s.lastIndexOf('/'));
     //根據(jù)實(shí)際情況寫
     var url = ul+"/upFils/1";
     var fd = new FormData();
     fd.append("fileName",document.getElementById("files").file[0]);
     var xhr = new XMLHttpRequest();
     xhr.upload.addEventListener("progress",uploadProgress,false);
     xhr.addEventListener("load",uploadComplete,false);
     xhr.addEventListener("error",uploadFailed,false);
     xhr.addEventListener("abort",uploadCanceled,false);
     xhr.open("post",url);
     xhr.send(fd);
}

//上傳進(jìn)度
function uploadProgress(evt){
     if(evt.lengthComputable){
          var percentComplete = Math.round(evt.loaded*100/evt.total);
          document.getElementById("progressNumber").removeAttribute("hidden");
          document.getElementById("progressNumber").innerHTML = percentComplete.toString()+"%";
     }else{
          document.getElementById("progressNumber").innerHTML = "無(wú)法計(jì)算";
     }
}

//服務(wù)器端返回響應(yīng)時(shí)觸發(fā)event事件
function uploadComplete(evt){
     var s = window.location.href;
     var ur = s.substr(0,s.lastIndexOf('.'));
     var message = evt.target.responseText;
     var json = JSON.parse(message);
     //根據(jù)實(shí)際情況判斷及增加ajax請(qǐng)求
     if(json.stuats==200){
          $.ajax({
               url:ur,
               type:"post",
               data:{path:json.path},
               success:function(data){
                    var dt = eval(data);
                    if(dt.stuats==200){
                         document.getElementById("submits").setAttribute("disabled","disabled");
                         document.getElementById("close").innerHTML = "<input type='button' onclick='closePage()'/>";
                         alert("文件上傳成功！");
                    }else{
                         alert("文件上傳失?。?);
                    }
               },
               error:function(){
                    alert("上傳過(guò)程出現(xiàn)未知錯(cuò)誤！");
               }
          });
     }else{
          alert("文件未能正確保存到服務(wù)器！");
     }
}

//文件上傳失敗觸發(fā)
function uploadFailed(evt){
     alert("試圖上傳文件時(shí)出錯(cuò)！");
}

//上傳文件取消觸發(fā)
function uploadCanceled(evt){
     alert("文件上傳中斷！");
}

//關(guān)閉本頁(yè)面
function closePage(){
    window.close();
}
</script>