[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(); } }

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