Sample code sharing for html5 file drag and drop upload

html5Drag-and-drop uploading of files is an old topic. There are many examples on the Internet. The code I originally found and modified was also found online, but I just stepped on a few. After the pit, I wanted to record the process.

Function Implementation

The following mainly introduces the implementation of dragging files from outside the browser to the browser for uploading. First, some necessary basics will be introduced.

DragEvents

Drag events include the following:

• dragstart: Fired when the user starts dragging theobject.

• dragenter: Triggered when the mouse passes over the target element for the first time and dragging occurs. The listener for this event should indicate whether drop is allowed at this location, or the listener does not perform any operation, then drop is not allowed by default.

• dragover: Triggered when the mouse passes over an element and drag occurs.

• dragleave: Triggered when the mouse leaves an element and drag occurs.

• drag: Triggered every time the mouse is moved when the object is dragged.

• drop: This event is triggered on the element when a drop occurs at the end of the drag operation. The listener should be responsible for retrieving the dragged data and inserting it at the drop location.

• dragend: Triggered when the mouse button is released while dragging the object.

When dragging files from outside the browser to the browser, the events that must be bound aredragoveranddrop, others can be left unbound.dragoveranddropEvent processingThe event## must be called within the function#preventDefault()function, otherwise the browser will perform default processing. For example, text-type files will be opened directly, and a download file box may pop up for non-text files.

DataTransfer Object

The drag object is used to transfer data through the drag event

event.dataTransferObtain.

• dataTransfer.dropEffect [ = value ]: Returns the currently selected operation type. You can set a new value to modify the selected operation. Optional values are:none, copy, link, move.

• dataTransfer.effectAllowed [ = value ]: Returns the allowed operation type, which can be modified. Optional values are:none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized.

• dataTransfer.types: Returns a DOMString listing all formats set in the dragstart event. Also, if there are files being dragged, one of the type strings will be "Files".

• dataTransfer.clearData( [ format ] ): Remove data in the specified format. If the argument is omitted all data is removed.

• dataTransfer.setData(format, data): Add the specified data.

• data = dataTransfer.getData(format): Return the specified data. If there is no such data, an empty string is returned.

• dataTransfer.files: Returns the dragged FileList, if any.

• dataTransfer.setDragImage(element, x, y): Use the specified element toupdate thedrag feedback, replacing the previously specified feedback ( feedback).

• dataTransfer.addElement(element): Add the specified element to the element list used for rendering drag feedback.

In this use case, the most important thing isdataTransfer.filesAttribute, It is a list of files that the user drags into the browser. It is aFileListobject withlengthattributes. Accessible via subscript.

FormData

FormDatarepresents a form, which can be passedappend('fieldName', value)The function adds parameters to the form. The parameters can be not only strings, but also File objects or even binary data.

XMLHttpRequest level 2

The new version of the XMLHttpRequest object. The XMLHttpRequest mentioned here refers to the new version.

XMLHttpRequest can issue HTTP requests to servers with different domain names. This is called "Cross-origin resource sharing" (Cross-originresourcesharing, referred to as CORS).

Browsers have a famous same-origin policy, which is the basis of browser security. In addition to browser support, CORS also requires server consent.

XMLHttpRequest supports sending FormData directly, just like the browser performs form submission.

XMLHttpRequest also supports progress information (progressevent). Progress is divided into upload progress and download progress. The upload progress event is inXMLHttpRequest.uploadobject, the download progress event is in theXMLHttpRequestobject. Each progress event has three properties:

• lengthComputable: Computable number of bytes uploaded

• total: Total number of bytes

• loaded: Number of bytes uploaded so far

In addition to progress events, the following five events are also supported:

• loadEvent: The transfer is completed successfully.

• abortEvent: The transfer was canceled by the user.

• #errorEvent: An error occurred during transmission.

• loadstartEvent: Transfer starts.

• loadendEvent: The transfer is completed, but it is not known whether it was successful or failed.

Same asprogressevent, theevent processingfunction belonging to the upload operation is bound toXMLHttpRequest.uploadOn the object, the attribute download is directly bound to theXMLHttpRequestobject.

Specific code

When testing on this machine, be careful to change the path in the code below to your own.

Server side

The server side needs to write a Servlet to receive the uploaded form./html5/FileUploadServlet

It can be implemented quickly using the @MultipartConfig annotation of servlet3.

Client code