Shulou(Shulou.com)06/01 Report--

This article focuses on "web front-end page how to achieve drag-and-drop file upload", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "web front-end page how to achieve drag-and-drop file upload"!

Upload files

HTML5 added the file API to provide the possibility for the client to manipulate the file locally.

We can select a file through a file form or drag-and-drop operation, and read the name, size, type, and modification time of the file through JavaScript.

The files attribute has been added to the file type input form to save the information about our uploaded files. If you want to upload multiple files, you can set the multiple attribute of input.

You can use the accept attribute to specify the MIME type of file upload, such as' image/jpeg'

Please select file read file information var btn = document.querySelector ('# btn_1'); var input = document.querySelector ('# input_1'); btn.addEventListener ('click', function () {/ / get the file selected in the file domain / / var file = input.files [0]; var file = input.files.item (0) If (file) {result [XSS _ clean] = 'file name:' + file.name + 'file last modified:' + file.lastModifiedDate+ 'file type:' + file.type + 'file size:' + file.size + 'byte'} else {result [XSS _ clean] ='no file selected';}}); page drag and drop operation

For dragged elements, HTML5 added three events to listen to the process of dragging

Dragstart drag and drop start

Drag is dragging.

Dragend drag end

Two.ondragstart = function (e) {/ / e.preventDefault (); console.log (e); e.dataTransfer.setData ("Text", e.target.id); console.log (e.dataTransfer.getData ("Text", e.target.id)) One [XSS _ clean] = 'start'} two.ondrag = function (e) {one [XSS _ clean] + = 'dragging'} two.ondragend = function (e) {one [XSS _ clean] = 'end'}

To drag an element, you must set the draggable attribute

The default action of the page is to drag and drop back to its original position.

During the drag phase, we can store the attributes or state of the dragged element into the dataTransfer of the event object. If a jump occurs, the browser's default event is triggered, and we need to use e.preventDefault () to block the default event.

The incident in the release area

For the dragged element, where it is dragged is the release area, and the events in the release area are as follows:

Dragenter is dragged and dropped into the

Dragover is dragged and dropped element movement

Dragleave is dragged and dropped out of the element

One.ondragenter = function (e) {/ / e.preventDefault (); console.log (e); one [XSS _ clean] = 'start'} one.ondragover = function (e) {one [XSS _ clean] + = 'dragging'} one.ondragleave = function (e) {one [XSS _ clean] = 'end'}

Drop listens for events when dragged objects are dragged into the release area and the mouse is released. He can receive the data in dataTransfer, so the drag and drop in our page can be written as follows:

* {box-sizing: border-box;} first and second one.ondragover = function (e) {e.preventDefault ();} two.onmousedown = function (e) {e.target.draggable = true; e.target.ondragstart = function (ev) {ev.dataTransfer.setData ("Text", ev.target [XSS _ clean]) } e.target.ondragend = function () {two.removeChild (this)}} one.ondrop = function (e) {var div = document.createElement ('div') div.style = "width: 50px _ height: 100pxbordertwo.removeChild 1px solid black;" div [XSS _ clean] = e.dataTransfer.getData ("Text") this.appendChild (div)}

For Google browser, e.dataTransfer.setData (key,value) causes the value of the browser's default search setting when dragged outside the drop area. We can block it if we need to.

For Firefox, you can't do without e.dataTransfer.setData (key,value). We can directly set the key-value pair to null, "

The latest versions of Google and Firefox did not find a problem.

The drop event cannot be triggered directly, because by default releasing the mouse, our drag will return to its original position and will not fall, so we should prevent the default event in the drop area.

Drag and drop file upload

After observation, the dataTransfer in the event object also has the files attribute, so we can upload the dragged file in the familiar way:

One.ondragover = function (e) {e.preventDefault ();} one.ondrop = function (e) {e.preventDefault () console.log (e.dataTransfer.files [0]);}

Then upload the Ajax file.

One.ondrop = function (e) {e.preventDefault () var file = e.dataTransfer.files [0]; var formData = new FormData (); formData.append ("aa", file); var xml = new XMLHttpRequest (); xml.open ("post", url, false); xml.send (formData) } at this point, I believe you have a deeper understanding of "web front-end page how to achieve drag-and-drop file upload". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.