由于项目需要,完成一个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

  

dropzonejs中文翻译手册的更多相关文章

  1. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  2. jQuery Cookie (内附 上百行的中文使用手册,与 所有的注释中文翻译)

    jQuery Cookie (内附 上百行的中文使用手册,与 所有的注释中文翻译) 博主亲自翻译. 大家多多捧场. 更多资源请点击"查看TA 的资源" .全场通通 2积分. htt ...

  3. Spark官方文档 - 中文翻译

    Spark官方文档 - 中文翻译 Spark版本:1.6.0 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述(Overview) 2 引入Spark(Linki ...

  4. Lua 5.2 中文参考手册

    闲来无事,发现Lua更新到了5.2.2,参考手册也更到了5.2,在网上发现只有云风翻译的5.1版,花了几天时间翻译了一些. 参考手册有点长,又要随时修改,所以在github上建了项目,有需要的朋友可以 ...

  5. jpgraph中文使用手册之文本和字体控制教程

    摘要:在之前的php jpgraph安装配置教程中已介绍过jpgraph字体的安装与配置方法,jpgraph类库中字体和文本的使用是非常重要的,jpgraph既可以控 制文本的旋转.对齐方式.字体大小 ...

  6. 【转】关于HTTP中文翻译的讨论

    http://www.ituring.com.cn/article/1817 讨论参与者共16位: 图灵谢工 杨博 陈睿杰 贾洪峰 李锟 丁雪丰 郭义 梁涛 吴玺喆 邓聪 胡金埔 臧秀涛 张伸 图钉派 ...

  7. Linux下的cman中文帮助手册配置

    Linux下的帮助命令man功能很强大,很好用,但显示的结果是英文,有时候看着还是吃力,就想着要是有man的中文显示结果该多好.网上搜寻一番后,终于找到解决方案,很简单,亲测有效.具体步骤如下: su ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 目录篇 -持续更新

    为了方便大家的阅读和学习,也是响应网友的建议,在这里为这个系列做一个目录.在目录开始这前,我先来回答之前遇到的几个问题. 1.为什么要学习EF? 这个问题很简单,项目需要.这不像学校,没人强迫你学习! ...

  9. CentOS7 安装中文帮助手册

    1.首先确定系统安装中文字体否 locale 2.rpm安装中文帮助手册 挂在光盘 将man-pages-zh-CN-1.5.2-4.el7.noarch.rpm拷贝到本机 rpm -ivh man- ...

随机推荐

  1. pyplot文本显示

    pyplot文本显示 pyplot中文字符显示 pyplot默认不支持中文字符,因为默认字体是sans-serif,英文字体不能显示中文 方法1,修改需要输出中文字符的地方 在有中文输出的地方,添加属 ...

  2. IDEA 码云 安装

    安装方式: 从IDEA插件仓库搜索Gitee下载并安装即可. 登陆并拉取项目代码 1. 启动 idea,选择Check out from Version Control-码云 2. 输入用户名和密码, ...

  3. WebDriverException: Message: f.QueryInterface is not a function

    WebDriverException: Message: f.QueryInterface is not a function 使用webdriver打开c.highpin.cn,结果报错,见下图: ...

  4. Java Tomcat下载、安装和环境变量配置

    win10下Tomcat的下载.安装和环境变量的配置 -----made by siwuxie095                             1.首先到Tomcat官网,传送阵:点击开 ...

  5. 【校招面试 之 C/C++】第18题 C++ 中的隐式转换以及explicit关键字

    1.什么是隐式转换: 众所周知,C++的基本类型中并非完全的对立,部分数据类型之间是可以进行隐式转换的. 所谓隐式转换,是指不需要用户干预,编译器私下进行的类型转换行为.很多时候用户可能都不知道进行了 ...

  6. SQL Server优化50法(转载)

           虽然查询速度慢的原因很多,但是如果通过一定的优化,也可以使查询问题得到一定程度的解决. 查询速度慢的原因很多,常见如下几种:     1.没有索引或者没有用到索引(这是查询慢最常见的问题 ...

  7. CentOS 安装 Xamarin官方Mono

    预先准备: 服务器可连入互联网 有yum 工具(没什么好说的,如果这个你没装,那重新装个系统吧,debian 等不要看这个,不一样的) wget 工具(可选) yum-uitl 工具包 导入Xamar ...

  8. vue2.0 tab切换几种方式

    第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作) <template> <div id="app"> <ul> <li ...

  9. YAML教程

    一.简介 YAML是一种人们可以轻松阅读的数据序列化格式,并且它非常适合对动态编程语言中使用的数据类型进行编码.YAML是YAML Ain't Markup Language简写,和GNU(" ...

  10. mysql添加注释

    -- 查看字段类型-- show columns from campaign_distribute --给表添加注释 -- alter table campaign_distribute commen ...