js上传视频到服务器并自动播放

  <div id="filePicker_video"></div>
    <!--文件选择按钮-->
 <a class="list" href="javascript:;"> <input id="file" type="file" name="myfile" onchange="UpladFile();"  value/>
 <span id="select_video">选择视频</span></a>  
 <input class="btn btn-primary   st-btn-primary" type="button" onclick="del();" value="删除" id="pic"> 
	function UpladFile() {
   			var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
   			if (fileObj.name) {
   				$(".el-upload-list").css("display", "block");
   				$('.list').hide();
   			} else {
   				$('.list').show();
   				alert("请选择文件")
   			}
   			sub();
   		}
   		/*删除*/
   		function del() {
   			var list = document.getElementById("filePicker_video");
   			list.removeChild(list.childNodes[0]);
   			$('.list').show();
   		}
   		//上传
   		function sub() {
   		//	var videoData = "";
   			var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
   			var formData = new FormData();
   			formData.append("file", fileObj); //上传一个files对象
   			formData.append("参数", "参数1"); //若需要上传的多个参数
   			formData.append("参数", "参数2"); 
   			var url = "服务器地址";
   			$.ajax({ 
   				url: url,
   				dataType: "json",
   				type: "post",
   				data: formData,
   				processData: false, //不处理发送的数据
   				contentType: false, //不设置Content-Type请求头
   				error: function(err) {
   					alert("上传失败!");
   					return;
   				},
   				success: function(res) {
   					console.log(res)
   				//window.videoData = res.data;
   					var aa = res.data
   					var str1 = '服务器地址' + aa; //拼接视频地址
   					$("#filePicker_video").append("<video  controls='' autoplay='' name='media'  id='video'><source src=" + str1 +
   						" type='video/mp4'></video>");
   					return;
   				}
   			})
   		}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值