业务场景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(); } }
至此,文件上传后,预览,并再确定后执行文件路径的数据库保存顺序确立.