app直播源码,JavaScript HTML5 dom,图片拖拽上传功能
app直播源码,JavaScript HTML5 dom,图片拖拽上传功能
1 | <!DOCTYPE html><br><html><br><head><br><meta charset= "utf-8" ><br><title></title><br><style type= "text/css" ><br>.box{<br>display: flex;<br>width: 100%;<br>justify-content: center;<br>margin-top: 300px;<br>align-items: center;<br>}<br>#drag{<br>width: 200px;<br>height: 200px;<br>display: flex;<br>justify-content: center;<br>border-radius: 10px;<br>align-items: center;<br><br>}<br>#draged{<br>width: 400px;<br>height: 400px;<br> /* border: 4px pink; */ <br>border-style: dashed;<br>margin-left: 100px;<br>border-radius: 10px;<br> /* border: 4px dashed #AAAAAA; */ <br>position: relative;<br>display: flex;<br>flex-direction: column;<br>justify-content: center;<br>align-items: center;<br>overflow-x: hidden;<br>overflow-y: scroll;<br>scrollbar-width: none;<br>-ms-overflow-style: none;<br>}<br> /* 隐藏滚动条 */ <br>#draged::-webkit-scrollbar {<br>display: none; /* Chrome Safari */ <br>}<br>#draged::before{<br>content: '请拖拽到此处' ;<br>color: #AAAAAA;<br>position: absolute;<br>z-index: -1;<br>}<br>#draged img {<br>width: 50%;<br>height: 50%;<br>object-fit: contain;<br>margin-top: 20px;<br>}<br>.dragover{<br>border: 4px orangered;<br>}<br>.dropSucess{<br>border: 4px green;<br>}<br></style><br></head><br><body><br><div class = "box" ><br><!-- 可拖拽元素 ,img元素和超链接a标签,默认允许拖放,可定义draggable,可以不定义draggable--><br><div id= "drag" draggable= "true" class = "drag" >可拖拽元素</div><br><!-- 必须阻止默认事件,因为浏览器对拖拽事件的默认处理方式是禁止拖拽 --><br><!-- ondrag 是拖拽开始,可存放拖拽数据,列如元素, class ,id等 --><br><!-- ondragover是元素进入放置区域,可进行更改样式等操作 --><br><!-- ondrop元素放置时的事件,可以对元素进行真实的移动操作 --><br><!-- 可放置区域,存放可拖拽的元素, --><br><div id= "draged" class = "" ></div><br><input id= "upload" type= "file" value= "file" /><br></div><br><script type= "text/javascript" ><br> const drag = document.getElementById( 'drag' )<br> const draged = document.getElementById( 'draged' )<br> /*<br>拖动事件<br>可拖动元素可以触发的:<br>dragstart:鼠标点中元素并且开始移动时触发<br>drag:拖拽过程中持续触发<br>dragend:拖拽结束松开鼠标时触发<br>当可拖拽元素到某个目标元素时,目标元素会触发的:<br>dragenter:拖拽元素到目标上时触发<br>dragover:拖动元素在目标元素中,持续触发<br>dragleave:离开目标元素时触发<br>drop:拖放元素到了目标元素中松开鼠标时触发<br>e.preventDefault(); 每个动作内部必须,写入这个,防止默认事件的产生。<br>拖拽事件中会初始化一个dataTransfer对象,用于保存拖拽数据和交互信息,在进行拖放操作<br>的时候,dataTransfer对象可以用来保存被拖动的数据。<br>他可以保存一项或多项数据,一种或多种数据类型,就是可以通过它来传输被拖动的数据。<br>以便在拖拽结束的时候,对拖拽数据进行其他操作。<br>clearData方法可以用来清除dataTransfer对象内的数据,可以指定删除特定格式的数据,<br>如果不指定格式,则默认删除所有携带的数据。<br>setData 方法在拖拽开始的时候向dataTransfer存放数据,用types属性来指定数据的MIME类型<br>getData 方法返回指定数据,如果数据不存在,返回空字符串,getData方法在拖动<br>结束时读取dataTransfer对象中的数据。<br>setDragimage(Element image,x,y):制定拖拽元素时跟随鼠标移动的图片,<br>x,y分别代表相对鼠标的坐标。<br>*/ <br> // 拖拽开始<br>drag.addEventListener('dragstart',handleDragStart)<br>function handleDragStart(e){<br>//text/plain,imgage/png,等等类型 e.target.id 存放的值<br>e.dataTransfer.setData('text/plain',e.target.id)<br>}<br>//拖拽结束事件<br>draged.addEventListener('dragover',handleDrageover)<br>function handleDrageover(e){<br>// 阻止默认事件。不要让浏览器默认事件来干扰。拖拽操作<br>e.preventDefault()<br>draged.classList.add('dragover')<br>}<br>// 拖拽离开事件<br>draged.addEventListener('dragleave',handleDragLeave)<br>function handleDragLeave(e){<br>e.preventDefault()<br>draged.classList.remove('dragover')<br>}<br>// 拖拽释放<br>draged.addEventListener('drop',handleDrop)<br>function handleDrop(e){<br>e.preventDefault()<br>// 将dom元素拖拽进可放置区域<br>// const draggedId = e.dataTransfer.getData('text/plain') //标注: 拖拽dom元素<br>// draged.appendChild(document.getElementById('drag')) //标注: 拖拽dom元素<br>draged.classList.add('dropSucess')<br>// console.log(...e.dataTransfer.items)<br>// 拖拽也支持外部拖拽文件,图片进来,可以在该事件中监听,<br>// 如果是拖拽文件需要注释上面 “标注:拖拽dom元素” 两行代码,如果拖拽dom,注释下面文件拖拽上传代码<br>// 遍历e.dataTransfer.items 属性去做操作<br>// ...e.dataTransfer.items 可能为空,做一个判空处理<br>if([...e.dataTransfer.items]){<br>// 拖拽文件,解构成数组,如果是多个需要遍历,所以调用forEach<br>[...e.dataTransfer.items].forEach(item=>{<br>// 如果拖拽进来的是文件夹<br>let Directory = item.webkitGetAsEntry()<br>if(Directory.isDirectory) {<br>console.log('这是一个文件夹')<br>}<br>console.log(Directory);<br>// 通过kind属性判断拖拽进来的是不是文件<br>if(item.kind === 'file') {<br>const file = item.getAsFile()<br>//createPreview 生成预览,比如判断图片<br>Preview(file)<br>}<br>})<br>}<br>}<br>// 图片处理<br>function Preview(file){<br>// 如果是图片类型的文件<br>if(file.type.startsWith('image')){<br>// 创建一个图片元素<br>const image = document.createElement('img')<br>// 根据文件对象创建一个ObjectURL,用作src属性<br>image.src = URL.createObjectURL(file)<br>// 图片加载成功过后,ObjectURL就没有用了,就回收这个ObjectURL<br>file.onload = function(){<br>URL.revokeObjectURL(this.src)<br>}<br>// 把图片追加到可放置区域<br>draged.appendChild(image)<br>} <br>}<br>// 文件上传功能学习中,以下代码无效<br>async function dirReader(item){<br>let res = []<br>let internalProces = (item,path,res)=>{<br>if(item.isFile){<br>item.file(file=>{<br>file.path = path + file.name<br>let newFile = new File([file],file.path,{type:file.type})<br>res.push(newFile)<br>})<br>} else if(item.isDirectory) {<br>let fileReader = file.createReader()<br>fileReader.readEntries(entries =>{<br>for(let i = 0; i < entries.length; i++){<br>internalProces(entries[i],path+item.name+"/",res)<br>}<br>})<br>}<br>}<br>await internalProces(item,'',res)<br>// console.log(res)<br>return res<br>}<br></script><br></body><br></html> |
以上就是 app直播源码,JavaScript HTML5 dom,图片拖拽上传功能,更多内容欢迎关注之后的文章
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2022-03-09 短视频平台搭建,生成图片形状的位置
2022-03-09 直播app开发,点击屏幕时显示进度条
2022-03-09 直播软件开发,图像视频的读取与保存,以及调用相机拍摄