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

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