JS学习第七篇;自定义拖拽上传按钮

原创 2017年04月28日 11:30:34

1,为什么拖拽上传?

     老板出的概念图中有这么个样式。而且许多的网站都支持拖拽上传。当然,在bootstrap的fileinput插件中是有这个样式的,但是当我使用webpack进行打包的时候,出现了不可名状的错误,导致在本地调试通过而在服务器上去无法通过。所以自己做一个。

2,如何做?

2.1 先做个框子,当文件拖到这个框子里时,触发相应的方法

说明;border-style设置虚线显示,text-align设置文字居中

2.2设置方法监听


2.3,获取文件对象并更改ui

说明;在多个文件上传时,需要显示文件缩略图和文件名,应该在div容器中设置向左浮动,保持所有的文件都能占据正确的位置

2.4,效果图


3,问题与解答


JS学习第七篇;自定义拖拽上传按钮

简单的自定义上传按钮
  • Xunxianren007
  • Xunxianren007
  • 2017年04月28日 11:30
  • 299

html5+js拖拽上传的那些事

最近搞了个拖拽上传的项目,以为挺简单,做了之后发现里面涉及的东西还是非常多的。这里随性的谈谈其中有意思的地方吧。...
  • liyijun4114
  • liyijun4114
  • 2016年08月26日 10:29
  • 6717

js拖拽文件上传

刚做完这个功能,把关键代码拿出来分享一下,如有毛病,各位指正。     //进入     jsDrag.addEventListener( "dragenter", function (e) ...
  • robotboy123
  • robotboy123
  • 2016年03月17日 09:07
  • 1910

HTML5 拖拽以及实现拖拽异步上传文件

HTML5拖拽 和 拖拽异步上传文件 一、传统实现拖拽的方式 传统的就是使用js实现元素的拖拽,核心原理如下: #box{    width:100px;    height:100px;  ...
  • sunfeizhi
  • sunfeizhi
  • 2015年08月09日 21:15
  • 3956

HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果...
  • lmj623565791
  • lmj623565791
  • 2014年06月16日 23:35
  • 23239

学习WCF之路6:会话

会话,就是通信双方进行通信的一个时间片,通信双方彼此认识,一旦会话结束他们就会变成永远的陌生人。会话的特性符合客户端和服务端需要通信多次才能完成的要求,在这个期间双方需要记住彼此,而且会话也是很多其他...
  • cjb694158453
  • cjb694158453
  • 2016年06月13日 08:50
  • 209

自定义表单(一)--拖拽(JS版本)

一、瞎扯      之前公司放我一个礼拜写了一个高度定制化,功能完善的自定义表单,然而因为去年9月份,硬盘,u盘,存储卡接连坏掉,代码就没了,不过也多亏这个,避免了日后的官司问题(开个玩笑,此处捂着嘴...
  • wlmnzf
  • wlmnzf
  • 2016年02月14日 22:29
  • 1299

HTML5拖拽上传文件,chrome文件夹上传

最近被安排做一个拖拽上传和文件夹上传的功能,不考虑兼容性,哈哈这个可以用HTML5实现。这里就不仔细学习HTML5,我只是想找例子,然后偷过来用,至于原理边用边学。   首先这里有一个很好...
  • ljinkai_ljk
  • ljinkai_ljk
  • 2013年12月07日 09:24
  • 2106

自定义文件上传按钮

WEB开发中,不同的浏览器对于标签显示的样式是不一样的,可能带来不好的用户体验。下面介绍下文件上传按钮的用户自定义样式的实现方法。 1、HTML代码 选择图片 实现原理: 和两个元...
  • ld_____
  • ld_____
  • 2015年09月23日 14:48
  • 1317

前端页面文件拖拽上传模块html/css/js代码示例

最近给卫生局做一个表格上传/可视化系统,算是小有成果。今天把项目中的文件拖拽上传模块分离出来,做了一个独立的小demo,并把相关代码打包上传到了我的github中,为了其他学习者和开发者提供拙见。gi...
  • u010582082
  • u010582082
  • 2017年05月18日 18:05
  • 658
收藏助手
不良信息举报
您举报文章:JS学习第七篇;自定义拖拽上传按钮
举报原因:
原因补充:

(最多只允许输入30个字)