ajax上传视频

最新推荐文章于 2022-11-25 14:25:35 发布

Amily_an

最新推荐文章于 2022-11-25 14:25:35 发布

阅读量613

点赞数

分类专栏： js 文章标签： ajax jquery

原文链接：http://www.aijquery.cn/Html/ShiLi/111.html

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

代码来自：jquery上传视频并截取第一帧当作封面图同步上传的在线演示

怕他删除所以全部粘贴过来了，想知道原理点击上方连接

<!doctype html>
<html lang="en">
	<head>
		<title>jquery上传视频并截取第一帧当作封面图同步上传的在线演示-aijQuery.cn</title>
		<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
		<style type="text/css">
			#drop {
				height: 200px;
				border: 2px dashed #2D67D1;
			}

			img,
			video {
				max-height: 190px
			}

			h2 {
				line-height: 130px
			}

			.drag_hover {
				border: 2px dashed red !important;
				background-color: #2E6DA4 !important;
			}
		</style>
	</head>
	<body style="text-align:center">
		<h3>jquery上传视频并截取第一帧当作封面图同步上传</h3>
		<div id="drop" class="w-75 mx-auto">
			<h2>可把图片直接拖拽到这里</h2>
		</div>
		<input type="file" class="form-control-file mt-1 mx-auto" id="selectfile">
		<button id="Up" class="btn btn-primary mt-2">上传</button>
		<script language="javascript">
			var $file = $("#selectfile");
			$file.on("change", function() {
				GetFile($file.get(0).files);
			});
			//声明一个formdata 用来上传
			var UForm = new FormData();
			$("#Up").on("click", function() {
				DoUp();
			});

			var $drop = $("#drop");
			with($drop) {
				on("dragenter", function() {
					$drop.addClass("drag_hover");
				});
				on("dragleave", function() {
					$drop.removeClass("drag_hover");
				});
				on("dragover", function(e) {
					e.originalEvent.dataTransfer.dragEffect = 'copy';
					e.preventDefault();
				});
				on("drop", function(e) {
					e.preventDefault();
					var files = e.originalEvent.dataTransfer.files;
					$drop.removeClass("drag_hover");
					if (files.length != 0) {
						GetFile(files);
					};
				});
			};

			function GetFile(files) {
				var file = files ? files[0] : false;
				if (!file) {
					return false;
				};
				UForm.append("shipin", file); //把要上传的视频放到UFom里
				var reader = new FileReader();
				reader.onload = function() {
					$drop.html("<div class='row'><div id='video' class='col-6'></div><div id='img' class='col-6'></div></div>");
					var html = "<video src='" + URL.createObjectURL(file) + "' controls />";
					var $video = $(html).appendTo($drop.find("#video"));
					with($video) {
						on("error", function() {
							alert("加载视频失败!请上传正确的视频！");
							return false;
						});
						on("loadeddata", function() {
							MakePoster($video[0]);
						});
					};
				};
				reader.readAsDataURL(file);
			};

			function MakePoster(video) {
				//canvas转Blob
				var dataURLtoBlob = function(dataurl) {
					var arr = dataurl.split(','),
						mime = arr[0].match(/:(.*?);/)[1],
						bstr = atob(arr[1]),
						n = bstr.length,
						u8arr = new Uint8Array(n);
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n);
					}
					return new Blob([u8arr], {
						type: mime
					});
				};
				var scale = 0.7; //截图绽放比例
				var canvas = document.createElement("canvas");
				canvas.width = video.videoWidth * scale;
				canvas.height = video.videoHeight * scale;
				canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
				var imgsrc = canvas.toDataURL('image/jpeg', 0.8); //第二个参数指图片质量
				var poster = dataURLtoBlob(imgsrc);
				UForm.append("fengmain", poster); //把要上传的封面图片放到UFom里
				$drop.find("#img").append('<img src="' + imgsrc + '">');
			}

			function DoUp() {
				$.ajax({
					url: "服务器端接收数据的文件",
					type: "POST",
					data: UForm,
					success: function(d) {
						//成功
					},
					error: function(e) {
						alert("这里只是测试，不能上传，你可以把代码复制过去，把url里换成自己的地址来实现服务器端的后台接收数据!");
					},
					contentType: false,
					processData: false
				});
			}
		</script>
	</body>
</html>

Amily_an

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax上传视频

代码来自：jquery上传视频并截取第一帧当作封面图同步上传的在线演示怕他删除所以全部粘贴过来了，想知道原理点击上方连接<!doctype html><html lang="en"> <head> <title>jquery上传视频并截取第一帧当作封面图同步上传的在线演示-aijQuery.cn</title> <script language="JavaScript" src="//cdn.bootcss.com/jquer
复制链接

扫一扫