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自定义弹窗组件
暂无评论信息
- 文章推荐
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
Docker 常用命令
docker目前代替虚拟机使用的一个容器,灵活好用。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1238天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据