[ajax] - 上傳圖片,視頻后的路徑回傳及確定邏輯

業務場景1: 后台要上傳視頻,圖片到網站的首頁或者附頁,上傳后,視頻,圖片存儲到服務器或cdn,但是此時還要加確定按鈕以實現該視頻,圖片路徑數據庫的插入操作.

頁面展現: 點擊操作按鈕,觸發input的click事件,再監聽input的change事件,完成按鈕到input的文件上傳轉換.

代碼部分: 

<video src="" id="showvideo2" style="height: 300px;width: 400px"></video>
<form id="uploadVideo2Form" enctype='multipart/form-data' style="display: none">
  <input id="video2Input" name="video2" type="file" class="form-control-file" style="display: none;">
</form>


<a id="uploadVideo2Btn" iconCls="icon-add" class="easyui-linkbutton"
   plain="true">上傳關於中商視頻</a>
<div id="video2Div"></div>

上方表示視頻的標簽,用來獲取ajax回調的路徑參數,用於預覽視頻.

form中的input為視頻傳入input, 而觸發它的是下面的a標簽.

(這么做是實現樣式的需要,單純的input是非常難看的)

  var thisVideo = null;

  $("#uploadVideo1Btn").click(function () {
    thisVideo = 1;
    $("#video1Input").click();
  });
  $("#video1Input").change(videoAjax);

  $("#uploadVideo2Btn").click(function () {
    thisVideo = 2;
    $("#video2Input").click();
  });
  $("#video2Input").change(videoAjax);

因為包含兩個視頻,所以用變量thisVideo來那個是哪個視頻的操作.(用於ajax傳值與回調配置)

function videoAjax() {
    var uploadFile = $("#video" + thisVideo + "Input")[0].files[0];
    console.log(uploadFile);
    var formData = new FormData();
    formData.append("uploadFile", uploadFile);
    // if ("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != "") {
    $.ajax({
      url: '/upload/video' + '/' + thisVideo + '/', 
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false, //不設置內容類型
      processData: false, //不處理數據
      success: function (result) {
        // alert(data);
        if (result.success) {
          $.messager.alert('操作結果', '上傳數據成功');
          $("#booten").linkbutton('enable');
          $('#uploadonlineinfo').dialog('close');
          var videoPath = null;
          for (var i in result.data) {
            videoPath = result.data[i];
          }
          $("#showvideo" + thisVideo + "").attr("src", videoPath);
          //設定新的按鈕,確定,取消該視頻
          $("#uploadVideo" + thisVideo + "Btn").hide();
          let confirmBtn = document.createElement("button");
          let btnText = document.createTextNode("確定使用該視頻");
          confirmBtn.id = "confirmBtn";
          confirmBtn.appendChild(btnText);
          confirmBtn.setAttribute("onclick", "confirmVideo()");

          let cancelBtn = document.createElement("button");
          let btnText1 = document.createTextNode("取消");
          cancelBtn.id = "cancelBtn";
          cancelBtn.appendChild(btnText1);
          cancelBtn.setAttribute("onclick", "cancelInAjax(1)");

          $("#video" + thisVideo + "Div").append(confirmBtn);
          $("#video" + thisVideo + "Div").append(cancelBtn);

          // $('#dg').datagrid('reload');
        } else {
          $.messager.alert('操作結果', '上傳數據失敗');
          $('#uploadonlineinfo').dialog('close');
        }
      }
    });
  }

上面的ajax即video上傳的ajax代碼,注意上傳成功后,執行了一系列操作: 隱藏上傳按鈕,展示[確定,取消]按鈕.

[確定,取消]按鈕對應兩個方法調用:

//確定使用該視頻
  function confirmVideo() {
    alert("確定視頻方法")
    //執行ajax將視頻url及modelId傳入數據庫video表
    let nowVideoSrc = $("#showvideo" + thisVideo + "").attr("src");
    let nowVideoModelId = thisVideo;
    $.ajax({
      url: '/demand/addVideo',
      data: {"v_url": nowVideoSrc, "model_id": nowVideoModelId},
      dataType: 'json',
      type: 'post',
      success: function (result) {
        if (result.success) {
          $.messager.alert('操作結果', '操作成功');
          cancelInAjax();
        } else {
          $.messager.alert('操作結果', '操作失敗');
          cancelInAjax();
        }
      }
    })
  }

  //取消視頻 或 確定后返回原始按鈕
  function cancelInAjax(value) {
      alert("取消");
    if (value == 1) {
      $("#confirmBtn").hide();
      $("#cancelBtn").hide();
      $("#showvideo" + thisVideo + "").attr("src", "");
      $("#uploadVideo" + thisVideo + "Btn").show();
    } else {
      $("#confirmBtn").hide();
      $("#cancelBtn").hide();
      $("#uploadVideo" + thisVideo + "Btn").show();
    }
  }

至此,文件上傳后,預覽,並再確定后執行文件路徑的數據庫保存順序確立.