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;
   				}
   			})
   		}
发布了43 篇原创文章 · 获赞 1 · 访问量 5689
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览