表單中的單文件點擊和拖拽上傳

時間 2019-11-09
標籤表單文件點擊上傳欄目 HTML 简体版
原文原文鏈接
　　在項目中碰到的提交表單時單文件的上傳，整理總結：javascript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文件上傳</title>
    <style media="screen">
    .wrap{
      width: 450px;
      height: 450px;
      border: 1px solid black;
      margin: 100px auto;
      padding: 20px;
    }
    .file-name{

    }
    .progressNumber{
      width: 80%;
      height: 20px;
      background: #ccc;
      margin: auto;
      border-radius: 10px;
      text-align: center;
    }
    .file-wrap{
      position: relative;
      width: 80%;
      margin: 30px auto;
    }
    .file-div{
      position: absolute;
      left: 36%;
      z-index: 50;
    }
    .fileInputP{
      display: inline-block;
      width: 120px;
      height: 30px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }
    .fileInputP span{
      display: inline-block;
      width: 110px;
      height: 30px;
      color: #fff;
      background: #0e90d2;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      border-radius: 5px;

    }
    .fileInputP input{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }
    #fileSpan{
      display: inline-block;
      width: 100%;
      height: 150px;
      border: 2px dashed #ccc;
      text-align: center;
      line-height: 100px;
      position: relative;
    }
    .file{
      position: relative;
    }
    .updata{
      cursor: pointer;
      color: #142ae4;
      font-weight: bold;
      position: absolute;
      right: 30px;ß
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>
  <div class="wrap">
    <div class="file">
      <p>
        <span>文件上傳：</span>
        <span class="file-name"></span>
        <span class="updata">上傳</span>
      </p>
      <p class="progressNumber" id="progressNumber"> 我是進度條 </p>
    </div>
    <div class="file-wrap">
      <div class="file-div">
        <p class="fileInputP">
            <span>選擇文件</span>
            <input type="file" multiple id="fileInput" />
        </p>
      </div>

      <span id="fileSpan">
          <p class="span-p">或者將文件拖到此處</p>
      </span>
    </div>
  </div>
  </body>
  <script type="text/javascript">
    var fileobj; // 文件對象
    $("#fileInput").on("change",function(){
      // 當前所選文件
      fileList(this.files);
    });
    // 拖拽外部文件，進入目標元素觸發 dragenter 用戶開始拖動元素時觸發
    $("#fileSpan").on("dragenter",function(){
      $(this).css("background","#ccc");
      $(".span-p").text('能夠釋放鼠標了');
    });
    //拖拽外部文件，進入目標，離開目標，防止連續觸發
    //ondragover - 當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件
    $("#fileSpan").on("dragover",function(){
      return false;
    });
    //拖拽外部文件，離開目標元素觸發
    //ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
    $("#fileSpan").on("dragleave",function(){
      $(this).css("background","none");
      $(".span-p").text("或者將文件拖到此處!");
    });
    //ondrop - 在一個拖動過程當中，釋放鼠標鍵時觸發此事件
    $("#fileSpan").on("drop",function(e){
      //HTML5的File API提供了一個FileList的接口，它
      // 能夠經過拖拽事件的e.dataTransfer.files來傳遞的文件信息，獲取本地文件列表信息。
      var file = e.originalEvent.dataTransfer.files;
      fileList(file);
      $(this).css("background", "none");
        return false;
    });

    function fileList(obj){
      // 若是沒有文件
      if(obj.length < 1){
        return false;
      }else if(obj.length > 1){
        $("#fileSpan").text("每次只能上傳一個文件！");
      }else {
        $("#fileSpan").text("或者將文件拖到此處！");
      }
      fileObj = obj[0]; // 獲取當前的文件對象
      var name = obj[0].name;

      $(".file-name").html(name);
    }

    // 點擊文件上傳的方法
    function uploadFileFun(){
      var fd = new FormData(); // 定義fromdata對象
      fd.append("file",fileObj); // 傳給後臺的參數 「file」 參數名 fileObj 文件對象
      /**
      能夠通告append 方法在 FormData對象裏面添加參數
      //fd.append("fileOid",fileOid);
      // 能夠在添加參數，fileOid是後臺返回的，判斷當前上傳的文件是第幾回上傳的，第一次 傳空字符串
      XMLHTTPRequest 對象，有progress 事件，用來返回進度信息
      -- 下載的progress 事件屬於XMLHTTPRequest 對象
      -- 上傳的progress 事件屬於 XMLHTTPRequest.upload 對象
      **/
      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.addEventListener("loadstart", " 我是函數名 ",false); // 傳輸開始
      // xhr.addEventListener("loadEnd", " 我是函數名 ",false); // 傳輸結束，可是不知道是否成功
      xhr.open("POST", "/file/upload_file"); // 給後臺提交的路徑
      xhr.send(fd);
    }
    // 傳輸進度的方法 進度條顯示
    function uploadProgress(evt) {
        if (evt.lengthComputable) {
          //evt.total 須要傳輸的總字符，evt.loaded 是已經上傳的字節
          // if evt.lengthComputable 不爲真  evt.total 等於 0
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            // 上傳的進度狀態
            $('#progressNumber').progressbar('setValue', percentComplete);
        }
        else {//大小沒法計算
            document.getElementById('progressNumber').innerHTML = "大小沒法計算";
        }
    }
    //傳輸成功的方法
    function uploadComplete(evt){
      //服務器返回的數據
      var message = JSON.parse(evt.target.responseText);
      if(message.code == "success"){ // 後臺返回的code值
        alert("上傳成功！");
      }else if(message.code == "fail"){
        alert("上傳失敗！");
      }
    }
    // 傳輸中出現錯誤
    function uploadFailed(evt){
      alert("刪除出錯！");
    }
    // 上傳由用戶或者瀏覽器取消連接
    function uploadComplete(evt){
      alert("上傳由用戶或者瀏覽器取消連接");
    }
  </script>
</html>