js视频上传的方法

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

二、直接上效果

三、直接上代码

// // 上传图片
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);
        },
    });
}

希望可以帮到大家

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/452906.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络面经八股-解释一下HTTP长连接和短连接?

在HTTP/1.0中&#xff0c;默认使用的是短连接。也就是说&#xff0c;浏览器和服务器每进行一次HTTP操作&#xff0c;就建立一次连接&#xff0c;但任务结束就中断连接。如果客户端浏览器访问的某个HTML或其他类型的 Web页中包含有其他的Web资源&#xff0c;如JavaScript文件、图…

探索制氮机在农产品保鲜中的应用方式

在现代生活中&#xff0c;农产品保鲜成为老生常谈的话题&#xff0c;水果数次厂商总是在为如何使水果蔬菜能够保存时间长一点而发愁&#xff0c;而制氮机的出现则解决了这一难题&#xff0c;为农产品保鲜技术带来了革命性的变革。本期恒业通小编和您一起了解制氮机在水果,蔬菜保…

k8s+wordpress+zabbix+elastic+filebeat+kibana服务搭建以及测试

一&#xff0c;环境&#xff1a;docker&#xff0c;k8s&#xff0c;zabbix&#xff0c;以及搭建worpdress&#xff0c;elasticsearch&#xff0c;filebeat&#xff0c;kibana 二&#xff0c;主机分配&#xff1a; 名称host详述个人博客3192.168.142.133 搭配mysql8.0.36的数据…

ubuntu安装并使用Anaconda

0、说明 对应着 Python 有 2.x 版本和 3.x 版本&#xff0c;Anaconda 也有 Anaconda2 以及 Anaconda 3 两个版本&#xff0c;考虑其流行度&#xff0c;一般谈及 Anaconda 时&#xff0c;默认为 Anaconda3。本人使用的ubuntu20.04。 1、Anaconda 简介 Anaconda 是一个用于科学…

【大模型API调用初尝试二】星火认知大模型 百度千帆大模型

大模型API调用初尝试二 科大讯飞—星火认知大模型单论会话调用多轮会话调用 百度—千帆大模型获取access_token单轮会话多轮会话 科大讯飞—星火认知大模型 星火认知大模型是科大讯飞开发的&#xff0c;直接使用可以点击星火认知大模型&#xff0c;要调用API的话在讯飞开发平台…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的交通信号灯识别系统(深度学习+UI界面+训练数据集+Python代码)

摘要&#xff1a;本研究详细介绍了一种采用深度学习技术的交通信号灯识别系统&#xff0c;该系统集成了最新的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地…

Xilinx 7系列FPGA的配置流程

目录 1.4配置流程 1.4.1 设备上电 ​编辑1.4.2 清除配置寄存器 1.4.3 采样模式引脚 1.4.4 同步 ​编辑1.4.5 检测设备ID ​编辑1.4.6 加载配置数据 1.4.7 CRC校验 1.4.8 启动序列 1.4配置流程 对于所有配置模式&#xff0c;7系列的基本配置流程都是相同的&…

算法练习:二分查找

目录 1. 朴素二分查找2. 在排序数组中查找元素的第一个和最后一个位置3. 搜索插入位置4. x的平方根5. 山脉数组的峰值索引6. 寻找峰值7. 寻找旋转排序数组中的最小值8. 点名 1. 朴素二分查找 题目信息&#xff1a; 题目链接&#xff1a; 二分查找二分查找的使用前提为数据具有&…

leetcode精选算法刷题训练篇 之 链表OJ(包含题目链接以及详细讲解)

好好学习&#xff0c;giao哥给你补&#x1f95a; 1、移除链表元素 难度等级&#xff1a;⭐ 题目链接&#xff1a;移除链表元素 2、链表的中间节点 难度等级&#xff1a;⭐⭐ 题目链接&#xff1a;链表的中间节点 3、反转链表 难度等级&#xff1a;⭐⭐⭐ 题目链接&#x…

C#版开源免费的Bouncy Castle密码库

前言 今天大姚给大家分享一款C#版开源、免费的Bouncy Castle密码库&#xff1a;BouncyCastle。 项目介绍 BouncyCastle是一款C#版开源、免费的Bouncy Castle密码库&#xff0c;开发人员可以通过该项目在他们的 C# 应用程序中使用 Bouncy Castle 提供的各种密码学功能&#x…

git提交代码描述时如何换行(更新时间24/3/12)

问题复现&#xff08;信心满满使用转义字符换行&#xff09; 解决方法&#xff1a; 写多个-m字符串的结构可以实现自动换行 注意空格 git commit -m"第一行描述" -m"第二行描述" 效果演示&#xff1a;&#xff08;强迫症福利&#xff09;

近700所高校,2024年预算出炉!

办学经费&#xff0c;是高校发展的核心与基石。学校人才培养、科学研究等各项事业的开展&#xff0c;都有赖于教育经费的支持。 近日&#xff0c;全国已有北京、上海、江苏、浙江等20多个省&#xff08;市、自治区&#xff09;的高校对外公布了2024年预算经费&#xff0c;小编…

L2-035 完全二叉树的层序遍历(Python)

L2-035 完全二叉树的层序遍历 分数 25 全屏浏览 切换布局 作者 陈越 单位 浙江大学 一个二叉树&#xff0c;如果每一个层的结点数都达到最大值&#xff0c;则这个二叉树就是完美二叉树。对于深度为 D 的&#xff0c;有 N 个结点的二叉树&#xff0c;若其结点对应于相同深度…

深入联合文件系统

Union File System&#xff08;联合文件系统&#xff0c;UnionFS&#xff09;是一种轻量级的高性能分层文件系统&#xff0c;它支持将文件系统中的修改信息作为一次提交&#xff0c;并层层叠加&#xff0c;同时可以将不同目录挂载到同一个虚拟文件系统下&#xff0c;应用看到的…

C# 8.0+版本项目 string不可为空

1.在某一次新建项目的时候发现&#xff0c;新建的项目&#xff0c;写的测试接口&#xff0c;接口的入参有string的参数&#xff0c; 但是调用接口的时候string的参数没有传报了400&#xff0c;很奇怪&#xff0c;也没有语法错误之类的。 2.解决办法 在项目上右键->属性->…

计算机毕业设计-springboot+vue前后端分离电竞社交平台管理系统部分成果分享

4.5系统结构设计 本系统使用的角色主要有系统管理员、顾客、接单员&#xff0c;本系统为后台管理系统&#xff0c;游客用户可以经过账号注册&#xff0c;管理员审核通过后&#xff0c;用账号密码登录系统&#xff0c;查看后台首页&#xff0c;模块管理&#xff08;顾客信息&am…

Covalent Network (CQT) 通过统一 API 集成,为 Gnosis Chain 的 AI 潜力赋能

作为一个为超 225 个链提供服务的领先多链索引器&#xff0c;Covalent Network (CQT) 正在与知名的 EVM 区块链基础设施提供者 Gnosis Chain 展开一项激动人心的合作。这一战略合作象征着先进的实时数据索引技术的集成&#xff0c;包括 Covalent Network (CQT) 的统一 API 和 G…

前端入职配置新电脑!!!

前端岗位入职第一天到底应该做些什么呢&#xff1f;又该怎样高效的认识、融入团队&#xff1f;并快速进入工作状态呢&#xff1f;这篇文章就来分享一下&#xff0c;希望对即将走向或初入前端职场的你&#xff0c;能够有所帮助。内含大量链接&#xff0c;欢迎点赞收藏&#xff0…

解决gpt无法发送对话的问题

问题描述 如图&#xff0c;今天登上去发现怎么无法发送消息 解决 可能是cookie问题&#xff0c;重新删除了就行了 cookie删除后&#xff0c;需要重新登录&#xff0c;主题色也重置为原来的白色了

MQTT Topic通配符

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 往期热门专栏回顾 专栏…