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

至此,文件上传后,预览,并再确定后执行文件路径的数据库保存顺序确立.