由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料:

  关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料

  还有就是发掘到的比较牛逼的一篇博客:http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html

实现图片拖拽上传需要用到那些技术?

  拖拽上传应用主要使用了以下HTML5技术:

    Drag&Drop : HTML5基于拖拽的事件机制.
    File API : 可以很方便的让Web应用访问文件对象,File API包括FileList、Blob、File、FileReader、URI scheme,本文主要讲解拖拽上传中用到的FileList和FileReader接口。
    FormData : FormData是基于XMLHttpRequest Level 2的新接口,可以方便web应用模拟Form表单数据,最重要的是它支持文件的二进制流数据,这样我们就能够通过它来实现AJAX向后端发送文件数据了。

菜鸟的尴尬!

  作为一个前端菜鸟,公司能给你4、5个小时调查实现所需要的技术已经很慷慨了。所以你想要对领导说:我要学习这个学习那个然后才能做。 呵呵,那是不可能的。现在的公司做的都是敏捷开发,讲求的是效率、成本控制,所以不会给你时间学会在来做东西的。那么怎么办? 我们强大的js有着丰富的插件,使用这些类库各方面来说都要比自己写的要好,至少CSS不用自己考虑太多,而且功能上比自己写的要好很多,毕竟时间有限,功力还不够。只能设想找个时间学习这些底层的技术,将来可以自己写。好了!说说今天的插件Dropzonejs

翻译初衷?

  其实也算不上翻译,只是这个类库很小,自己在看官方手册的时候忽然想着,看英文总是觉得有点慢,但是开发的过程中我们需要反复查找手册,学习手册。这样还不如在我第一次通读手册时,一边读一边写下翻译,就这样有了这个翻译的手册,全凭理解和翻译工具。可能会有一些理解错误的地方,但是无论怎样也算是有了一个自己整理的手册了,上周项目完成了,今晚闲着就把这些整理出来,分享个大家

DropzoneJS是什么?

  DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库,它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制.

DropzoneJS相关信息

  官网:http://www.dropzonejs.com/

  GitHub:https://github.com/enyo/dropzone

  

DropzoneJS中文手册

  地址:http://wxb.github.io/dropzonejs.com.zh-CN/

  这个手册是我把官网copy了一份,然后制作的一个静态的手册

好了,很简单的一个js类库,大家有需要了可以对看看我翻译的中文,如果我的翻译有什么错误可以留言或者在GitHub:https://github.com/wxb/dropzonejs.com.zh-CN 上issue

  

最新文章

  1. 我大中华微软MVP中国区人才库
  2. 分布式学习系列【dubbo入门实践】
  3. spark 获取applicationID
  4. 区别和详解:jQuery extend()和jQuery.fn.extend()
  5. C# ICSharpCode.SharpZipLib.dll文件压缩和解压功能类整理,上传文件或下载文件很常用
  6. Qt SizePolicy 属性
  7. ASP.net MVC3 报错"未找到视图“Index”或其母版视图,或没有视图引擎支持搜索的位置 "的解决方法
  8. 創建HTTP 服務器
  9. Combox选中项注意事项
  10. php中mysql语句的基本写法
  11. javascript获取css中的样式值
  12. Redux 介绍
  13. Spring Boot 之Hello Word
  14. Python3:几行代码实现阶乘
  15. Linux中对逻辑卷的建立
  16. 高可用Hadoop平台-Ganglia安装部署
  17. Struts2(二)工作原理
  18. bzero, memset ,setmem 区别【转】
  19. 使用JS伪造Post请求
  20. ARM CPU 架构

热门文章

  1. python 安装mysqldb组件
  2. mongodb基础学习4-游标
  3. jemalloc for mysql
  4. ArcGIS模型构建器案例学习-批量删除空要素类地理模型
  5. 利用R产生随机数
  6. spring boot 配置 freemarker
  7. org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]
  8. .NET格式化字符串详细说明
  9. Maven核心简析
  10. PAT 1057 数零壹 (20)(代码+思路)