js视频上传的方法_js 上传视频-CSDN博客

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/136664448

本文详细介绍了如何使用JavaScript和jQuery的Ajax功能实现图片和视频的上传，提供上传代码示例，包括FormData处理和URL构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、视频上传于图片上传类似他们的上传方法一样。路径不同标签不同；

二、直接上效果

三、直接上代码

// // 上传图片
let urls = "https://wwz.jingyi.icu/";
let a = $("form img")
// console.log(a);

function fl() {
	let read = document.getElementById("form")
	let forms = new FormData(read);
	console.log(forms);
	$.ajax({
		type: "POST",
		url: "https://wwz.jingyi.icu/app/File/file",
		headers: {
				id: 23
			},
		data: forms,
		// dataType: 'json',
		Cache: false,
		processData: false,
		contentType: false,
		success: function(res) {
			console.log(res);
			fro = res.data.url
			console.log(fro);
			let img = urls + fro;
			console.log(img);
			$(".image").html(
				`<img src="${img}" alt="" style="border-radius: 100%;" width="60px" height="60px" >`)
			sessionStorage.setItem('shangtupian', fro)
		
		},
	})
}
// 上传视频
let urlsed = "https://wwz.jingyi.icu/";
  let ad = $("form video");
function uploadVideo() {
    let read = document.getElementById("formsed");
    let formData = new FormData(read);
    console.log(formData);

    $.ajax({
        type: "POST",
        url: "https://wwz.jingyi.icu/app/File/file",
        headers: {
            id: 23
        },
        data: formData,
        Cache: false,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res);
            fro = res.data.url;
            console.log(fro);
            let videoUrl = urls + fro;
            console.log(videoUrl);
            $("video").attr('src', videoUrl);
			  $("#uploadedVideo").css('display', 'block');
            sessionStorage.setItem('shangshipin', videoUrl);
        },
    });
}

希望可以帮到大家