H5拖拽文件上传
分类专栏: Html&
简介 简单实现拖拽上传,供参考。
<p><!doctype html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <title>Drag</title></p><p> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></p><p> <style></p><p> *{</p><p> margin:0;</p><p> padding:0;</p><p> }</p><p> .container{</p><p> width:400px;</p><p> height:300px;</p><p> margin:100px auto;</p><p> border:2px dashed black;</p><p> box-sizing:border-box;</p><p> overflow:auto;</p><p> }</p><p> .containerDrop{</p><p> border:2px dashed blue;</p><p> }</p><p> .tips{</p><p> line-height:290px;</p><p> text-align:center;</p><p> }</p><p> .file{</p><p> width:100%;</p><p> height:40px;</p><p> display:block;</p><p> position:relative;</p><p> list-style-type:none;</p><p> }</p><p> .text{</p><p> line-height:40px;</p><p> font-size:20px;</p><p> position:relative;</p><p> z-index:2;</p><p> padding-left:10px;</p><p> }</p><p> .progress {</p><p> position:absolute;</p><p> left:0px;</p><p> top:0px;</p><p> width:0%;</p><p> height:100%;</p><p> background-color:#B0E24B;</p><p> }</p><p> .loading,.right,.wrong{</p><p> display:inline-block;</p><p> width:30px;</p><p> height:30px;</p><p> vertical-align:middle;</p><p> padding-right:10px;</p><p> /*background-size:contain;*/</p><p> }</p><p> .loading{</p><p> background:url('loading.png') no-repeat;</p><p> }</p><p> .right{</p><p> background:url('right.png') no-repeat; </p><p> }</p><p> .wrong{</p><p> background:url('wrong.png') no-repeat; </p><p> } </p><p> .none{</p><p> display:none;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div id="container" class="container"></p><p> <div class="tips" id="tips">拖动文件至此区域,即可上传</div></p><p> <ul id="files" class="none"></p><p> </ul></p><p> </div></p><p> <div id="template" class="none"></p><p> <li class="file"></p><p> <span class="text"><span class="loading"></span><span class="name">aaa</span></span></p><p> <div class="progress"></div></p><p> </li></p><p> </div></p><p> <script></p><p> (function($){</p><p> $("#container").on("dragenter",function(e){</p><p> if(!$("#tips").hasClass("none")){</p><p> $("#tips").text("松开鼠标,即可上传");</p><p> }</p><p> $("#container").addClass("containerDrop");</p><p> }).on("dragleave",function(e){</p><p> if(!$("#tips").hasClass("none")){</p><p> $("#tips").text("拖动文件至此区域,即可上传");</p><p> }</p><p> $("#container").removeClass("containerDrop");</p><p> }).on("dragover",function(e){</p><p> e.preventDefault();</p><p> }).on("drop",function(e){</p><p> e.preventDefault();</p><p> if(!$("#tips").hasClass("none")){</p><p> $("#tips").addClass("none");</p><p> $("#files").removeClass("none");</p><p> }</p><p> $("#container").removeClass("containerDrop");</p><p> var files = e.originalEvent.dataTransfer.files;</p><p> for(var i=0;i<files.length;i++){</p><p> var file = files[i];</p><p> console.log(file);</p><p> var li = $("#template li").clone();</p><p> var icon = li.find(".loading");</p><p> var name = li.find(".name");</p><p> var progress = li.find(".progress");</p><p> name.text(file.name);</p><p> $("#files").append(li);</p><p> simuUpload(file,progress,icon);</p><p> upload(file,progress,icon);</p><p> }</p><p> })</p><p> //模拟文件上传</p><p> var simuUpload = function(file,progressEle,iconEle){</p><p> var progress = 0;</p><p> var timer = setInterval(function(){</p><p> progress = progress + Math.floor(Math.random() * 3);</p><p> if(progress <= 100){</p><p> progressEle.css("width",progress + "%");</p><p> } else {</p><p> clearInterval(timer);</p><p> progressEle.css('width','0px');</p><p> iconEle.removeClass("loading").addClass("right")</p><p> }</p><p> },100)</p><p> }</p><p> //真实文件上传</p><p> var upload = function(file,progressEle,iconEle){</p><p> var fd = new FormData();</p><p> fd.append("pic",file);</p><p> var xhr = new XMLHttpRequest();</p><p> xhr.open("POST","http://localhost/test/upload.php",true);</p><p> xhr.upload.onprogress = function(e){</p><p> percent = 100 * e.loaded / e.total;</p><p> progressEle.css("width",percent + "%");</p><p> }</p><p> xhr.onload = function(){</p><p> if(xhr.status === 200){</p><p> progressEle.css('width','0px');</p><p> iconEle.removeClass("loading").addClass("right")</p><p> } else{</p><p> iconEle.removeClass("loading").addClass("wrong")</p><p> }</p><p> }</p><p> xhr.send(fd);</p><p> }</p><p> })(jQuery);</p><p> </script></p><p></body></p><p></html></p>
分享到:
转载:
喜欢 1
收藏
上一篇:
Vue自定义弹窗组件
暂无评论信息
- 文章推荐
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
-
docker搭建jenkins环境执行宿主机的docker无权限的解决方法
初次搭建jenkins持续集成工具的时候,在运行项目阶段出现 permission denied的情况
- 点击排行
- 站长推荐
- 猜你喜欢
- 事件循环机制:JavaScript被设计为单线程,那如何做到异步的呢?
- Twitter 正式起诉马斯克,要求强制完成 440 亿美元收购交易
- 计算机科学导论_数据运算
- axios请求缓存+防止重复提交
- 安装yum和securert工具
- 英国电信要求英政府延期移除华为设备,需花费约 40.6 亿元
- git:如何管理本机的多个ssh密钥(多个远程仓库账号)
- Counterpoint:台积电占据 Q1 智能手机 AP / SoC 和基带出货量 70% 份额
- vue封装通用的axios请求
- mediaDevices.getUserMedia提示DOMException:Permission denied by
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1268天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据