HTML5 attachment drag upload drop & google.gears implement code _javascript Tips

Tencent Weibo has also been near implementation of drag and drop upload. It's actually very simple.
Because there is no server support in the article can not do upload demo, download the instance
what support is needed to drag and drop uploads
1: Browser support drop event is required. (Gets the file object in response to the drag event);
2:xmlhttprequest objects have sendasbinary methods (for sending data);
The above two conditions currently only have Firefox to achieve.
Chrome is the first standard, and the 2nd item can be simulated using google.gears.
So can implement drag-and-drop browsers have firefox3.6 + and chrome7+.
How to implement drag and drop upload
1: Bind the Drop event.
2: Get the File object.
3: Gets the object's 2 data.
4: Simulate data to send a POST request.

Because XMLHttpRequest and google.gears are very different.
So I always do the encapsulation (UPLOADFILEXHR). I've encapsulated the 2 3 4 steps above.
As long as the instantiation of UPLOADFILEXHR can do drag-and-drop file upload. Click to download

Instance

1: Referencing the Uploadfilexhr.js file

Copy Code code as follows:

<script type= "Text/javascript" src= "Uploadfilexhr.js" ></script>

2: Instantiate UPLOADFILEXHR binding events, set parameters, etc. (you can see the following UPLOADFILEXHR introduction)

Copy Code code as follows:

/**
* var upLoad = new uploadfilexhr ({url: '/cgi-bin/upload_img_fdfs ', Name: ' Filedata '});
* URL: Upload data path
* Name: Background read the name of the data
* XHR:google.gears or new XMLHttpRequest ()
* Format: Upload formatting regular expressions
*
*
* Methods
*. onerror function Error
*. Onloadstart function Transfer starts Parameter event object (if you are using Google.gears without this method)
*. onprogress function Transfer Progress Parameter event object
*. onreadystatechange function Status Parameter this. Xhr
*/
var upLoad = new uploadfilexhr ({url: '/cgi-bin/upload_img_fdfs ', Name: ' Filedata '});
Upload.format =/jpg|gif|jpeg|png/; Set upload format
Define format Error calling method
Upload.onformaterror = function () {
Alert (' Upload format error, only support [jpg|gif|jpeg|png] format! ');
}
Define Upload Status method
This is the same as using the XMLHttpRequest object to manipulate time.
Upload.onreadystatechange = function () {
if (upLoad.XHR.readyState = = 4) {
Log (UpLoad.XHR.responseText);
}
}
Start uploading
Upload.onloadstart = function (f) {
Start uploading
}
Get Real-time upload progress
upload.onprogress = function (e) {
/*
* E.loaded has uploaded the data size
* Total size of e.total
* Math.Round (e.loaded *)/e.total) data upload percent
*/
Log (' already uploaded ' + math.round (e.loaded *)/e.total) + '% ')
}

3: Binding Drop

Copy Code code as follows:

/*
* All we need is ondrop events *
* OnDragEnter and OnDragOver Direct bind Stopprevent method cancel default action
* OnDrop bind Start method Note that you must use call to point this to the object you instantiate
*/
Elem.ondragenter = upload.stopprevent;
Elem.ondragover = upload.stopprevent;
Elem.ondrop = function (e) {upload.stopprevent (e); UpLoad.start.call (UpLoad, E)};

4: It can be dragged and pulled

How to use UPLOADFILEXHR

New UPLOADFILEXHR (Object)
var uploadfile = new uploadfilexhr ({url: ', Name: '})
Url	String	Upload Address	Have to
Name	String	Background gets the name of the data	Have to
Property
Format	Regexp	Filter file types such as (/jpg|pen|jpeg|gif/), all files are not set	Not necessary
Debug	Boolean	Whether to turn on debug	Default False
Auto Populate properties
Xhr	Object	After instantiating the properties that are automatically populated by the browser, the XHR object used by the current uploaded file is saved here	Automatic
Support	Object	What is currently being used to transmit data {Googlegears:boolean, Filereader:boolean}	Automatic
Method
Start	function	Bind to the method on the drop event to receive an event default e parameter. Please point this to the object you are currently calling start
Stopprevent	function	Cancel event bubbling and event default actions	return False
Checkfile	function	Check the file property (format, size, etc.)	Return Boolean
Event
OnError	function	Error	Default parameter E (Error object)
Onformaterror	function	Incorrect format (judged by the Format property)	Default parameter file (current file object)
Onloadstart	function	Start uploading	Default parameter file (Google.gears) or E (XMLHttpRequest)
OnProgress	function	Upload Progress	Event Default Parameters
onReadyStateChange	function	Upload Status	Event Default Parameters