- 网站精华
H5拖拽文件上传
简介 简单实现拖拽上传，供参考。
<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自定义弹窗组件
暂无评论信息