due to the project needs, complete a Web picture drag and drop upload, also learn and understand the front-end of the comparison of the new technology: HTML5 API, as a front-end rookie, nothing to say, directly share their learning information:
These new features of HTML5 can be found on the HTML5 of the Mozilla developer community MDN https://developer.mozilla.org/zh-CN/.
There is a relatively good to explore a blog: http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html
What techniques are needed to implement picture drag and drop uploads?
The following HTML5 technologies are used primarily for drag-and-drop upload applications:
DRAG&DROP:HTML5 is based on the drag-and-drop event mechanism.
File API: It is convenient for the web app to access the files object, including FileList, Blob, file, FileReader, URI scheme, This article mainly explains the filelist and FileReader interfaces used in drag-and-drop uploads.
Formdata:formdata is a new interface based on XMLHttpRequest Level 2, which makes it easy for Web applications to emulate form form data, and most importantly it supports binary streaming data for files, so that we can implement Ajax to send file data back-end.
As a front-end rookie, the company can give you a 4, 5-hour survey to achieve the required technology has been very generous. So you want to say to the leader: I want to study this study and then can do. Oh, that is impossible. Now the company is doing agile development, emphasis on efficiency, cost control, so will not give you time to learn to do things. So what? Our powerful JS has a rich plug-in, the use of these kinds of libraries in all aspects of the better than their own writing, at least the CSS do not have to consider too much of their own, and the function is much better than their own writing, after all, time is limited, skill is not enough. Can only imagine to find a time to learn these low-level technology, will be able to write their own. All right! Talk about today's plugin Dropzonejs
In fact, it is not a translation, but this kind of library is very small, I look at the official manual when suddenly thinking, see English always feel a little slow, but the process of development we need to find manuals, learning manuals. This is not as good as when I read the manual for the first time, while reading and writing the translation, so that the translation of the Handbook, all based on understanding and translation tools. There may be some misunderstanding of the place, but no matter what it is to have a manual of their own, last week the project was completed, and tonight, idle to put these together, share a
What is Dropzonejs?
Dropzonejs is an open source class library that provides drag-and-drop uploads of files and provides image previews, which are lightweight, do not rely on any other class libraries (such as jquery) and are highly customizable.
Dropzonejs Related Information
Official website: http://www.dropzonejs.com/
Dropzonejs Chinese Manual
This handbook is a static manual that I copied a copy of the official website and then made
Well, very simple a JS class library, we need to look at my translated Chinese, if my translation has what error can leave a message or on the GITHUB:HTTPS://GITHUB.COM/WXB/DROPZONEJS.COM.ZH-CN issue
Dropzonejs Chinese Translation Handbook