HTML5 attachment drag and drop upload drop & google.gears implementation code_javascript skills

Tencent Weibo has also recently implemented drag-and-drop uploading. It's actually very simple.
Since there is no server support, the upload demonstration cannot be done in the article. Download example
What support is needed for drag and drop upload
1: The browser needs to support the drop event. (Get the file object in response to the drag event);
2: The XMLHttpRequest object has the sendAsBinary method (used to send data);
The above two conditions are currently only achieved by firefox.
The first item of chrome meets the standard, and the second item can be simulated using google.gears.
So the browsers that can implement drag and drop uploading include firefox3.6 and chrome7.
How to implement drag and drop upload
1: Bind the drop event.
2: Get the file object.
3: Get the binary data of the object.
4: Simulate data to send post request.

Since XMLhttprequest and google.gears are very different.
So I always encapsulate it (UpLoadFileXHR). I have encapsulated the above steps 2, 3 and 4.
As long as you instantiate UpLoadFileXHR, you can drag and drop files to upload. Click to download

Example

1: Reference the UpLoadFileXHR.js file

Copy the code The code is as follows:

< script type="text/javascript" src="UpLoadFileXHR.js">

2: Instantiate upLoadFileXHR binding events, set parameters, etc. (For details, see UpLoadFileXHR below Introduction)

Copy code The code is as follows:

/**
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'});
* url: upload data path
* name: background reading data name
* XHR: google.gears or new XMLHttpRequest()
* format: upload format regular expression
*
*
* Methods
* .onerror function An error occurred
* .onloadstart function Transmission start Parameter Event object (if using google.gears, there is no such method)
* .onprogress function Transmission progress Parameter Event object
* .onreadystatechange function State Parameter this.XHR
*/
var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'});
upLoad.format = /jpg|gif|jpeg|png/; // Set upload format
//Definition format error calling method
upLoad.onformaterror = function(){
alert('Upload format error, only [jpg|gif|jpeg|png] format is supported!');
}
// Define the upload status method
// The operation time is the same as using the XMLhttprequest object
upLoad.onreadystatechange = function(){
if(upLoad.XHR.readyState == 4 ){
log(upLoad. >}
//Get real-time upload progress
upLoad.onprogress = function(e){
/*
* e.loaded Uploaded data size
* e.total total size
* Math.round((e.loaded * 100) / e.total) Data upload percentage
*/
log('Already uploaded' Math.round((e.loaded * 100) / e .total) '%')
}


3: Bind drop

Copy code

The code is as follows: /* * We only need the ondrop event* ondragenter and ondragover directly bind the stopPrevent method to cancel the default action* ondrop binds the start method Note Here you must use call to point this to the object you instantiated

*/

elem.ondragenter = upLoad.stopPrevent;
elem.ondragover = upLoad.stopPrevent;
elem.ondrop = function(e ){upLoad.stopPrevent(e);upLoad.start.call(upLoad, e)};


4: Can be dragged

How to use UpLoadFileXHR

new UpLoadFileXHR(Object)

var upLoadFile = new UpLoadFileXHR({url:'',name:''})

url

string

Upload address

Required

name

string

The name of the data obtained in the background

Required

Attributes

format

RegExp

Filter file types such as (/jpg|pen|jpeg|gif/); if not set, all files will pass

Not necessary

debug

Boolean

Whether debug is enabled

Default false

Autocomplete attributes

XHR

object

After instantiation, the properties automatically filled in according to the browser, here is saved the xhr object used to upload the file currently

Automatic

support

object

What is currently used to transmit data

new UpLoadFileXHR(Object)
var upLoadFile = new UpLoadFileXHR({url:'',name:''})
url	string	上传地址	必须
name	string	后台取得数据的name	必须
属性
format	RegExp	过滤文件类型比如(/jpg|pen|jpeg|gif/);不设置则所有文件通过	非必要
debug	Boolean	是否开启debug	默认false
自动填充属性
XHR	object	实例化以后根据浏览器自动填充的属性，这里保存了当前上传文件所使用的xhr对象	自动
support	object	当前用什么传输数据 {googleGears:Boolean, fileReader:Boolean}	自动
方法
start	function	绑定到drop事件上的方法,接收一个事件默认e参数。请把this指向你当前的调用start的对象
stopPrevent	function	取消事件冒泡和事件默认动作	return false
checkFile	function	检查file属性(格式，大小等)	return Boolean
事件
onerror	function	出错	默认参数 e(错误对象)
onformaterror	function	格式不正确(判断依据 format 属性)	默认参数 file(当前file对象)
onloadstart	function	开始上传	默认参数 file(google.gears下) or e(XMLhttprequest下)
onprogress	function	上传进度	事件默认参数
onreadystatechange	function	上传状态	事件默认参数

{googleGears:Boolean, fileReader:Boolean}

Automatic

Method

start

function

is a method bound to the drop event and receives an event default e parameter. Please point this to your current object calling start

stopPrevent

function

Cancel event bubbling and event default action

return false

checkFile

function

Check file attributes (format, size, etc.)

return Boolean

Event

onerror

function

Error

Default parameter e (error object)

onformaterror

function

The format is incorrect (judged based on the format attribute)

Default parameter file (current file object)

onloadstart

function

Start upload

Default parameter file(under google.gears) or e(under XMLhttprequest)

onprogress

function

Upload progress

Event default parameters

onreadystatechange

function

Upload status

Event default parameters