<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="点击上传" disabled="disabled" onclick="subForm()"/>
     </div>

     <!--显示文件信息和进度条部分-->
     <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()">关闭</button>
          </div>
     </div>
     
</form>

<script type="text/javascript">
//选中文件或是文件发生改变时触发
function changes(){
     document.getElementById("console").setAttribute("hidden","hidden");
     document.getElementById("progressNumber").setAttribute("hidden","hidden");
     document.getElementById("submits").setAttribute("disabled","disabled");
     //获取文件对象
     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("文件大小超过5MB，请选择小于5MB的相关文件！");
          }
     }else{
          alert("文件类型不匹配，请选择相匹配的文件类型！");
     }
}

//上传
function subForm(){
     //获取项目全部路径
     var s = window.location.href;
     //按自己的需求截取
     var ul = s.substr(0,s.lastIndexOf('/'));
     //根据实际情况写
     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);
}

//上传进度
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 = "无法计算";
     }
}

//服务器端返回响应时触发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);
     //根据实际情况判断及增加ajax请求
     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("上传过程出现未知错误！");
               }
          });
     }else{
          alert("文件未能正确保存到服务器！");
     }
}

//文件上传失败触发
function uploadFailed(evt){
     alert("试图上传文件时出错！");
}

//上传文件取消触发
function uploadCanceled(evt){
     alert("文件上传中断！");
}

//关闭本页面
function closePage(){
    window.close();
}
</script>