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学习第七篇;自定义拖拽上传按钮

简单的自定义上传按钮

JavaScript 文件拖拽上传插件 dropzone.js 学习总结。

最近写了个拖拽上传的功能,用到了dropzone.js 很好用的东东,学的还不是很好,,先做一下总结,希望能帮到跟我一样刚用的童鞋们。 首先下载dropzone.js文件并添加到页面中即可。他需要j...

JS学习32:html5拖拽图片批量ajax无刷新进度上传

1、前端拖拽图片 之前有篇文章说到HTML5的拖拽(drag、drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-...

css自定义文件上传按钮样式

  • 2016年06月23日 18:07
  • 36KB
  • 下载

js,jQuery实现拖拽自定义移动端板块,web移动端开发

由于项目需求,需要一个能排版移动端页面布局的插件,因此,作为前端的就首当其任了 一般情况下写代码,时间充足我都会先写一遍原生JS 效果,实例代码如下css : ...

d3.js的关系图初试(附加拖拽、缩放及根据自定义名称确定节点)

上次用的百度的echarts做的关系图,这周选择的是d3.js做的关系图。总体来看,echarts更简单一些,因为他的文档很容易,而d3的因为是外国的,所以文档阅读起来比较麻烦,即使有中文文档但是有些...

File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本

File Uploader的前身是Ajax Upload。按照官方的说法,升级到FileUploader主要是添加了一些新的特性,修正了一些比较严重的错误。但在我这个使用者看来,二者最大的不同在于:F...

Js+php实现异步拖拽上传文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS学习第七篇;自定义拖拽上传按钮
举报原因:
原因补充:

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