How to implement drag and drop Preview with HTML5

This article focuses on "how to achieve drag and drop preview with HTML5". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to achieve drag and drop preview with HTML5"!

Source code

HTML5 file drag preview Demo H2 {padding:0px; margin:0px;} div#show {border: 1px solid # ccc; width: 400px; height: 300px; display:-moz-box; display:-webkit-box -moz-box-align: center;-webkit-box-align: center;-moz-box-pack: center;-webkit-box-pack: center; resize:both; overflow:auto;} div [id ^ = show]: hover {border: 1px solid # 333 } div#main {width:100%;} div#successLabel {color:Red;} div#content {display:none } function init () {var dest = document.getElementById ("show"); dest.addEventListener ("dragover", function (ev) {ev.stopPropagation (); ev.preventDefault ();}, false) Dest.addEventListener ("dragend", function (ev) {ev.stopPropagation (); ev.preventDefault ();}, false); dest.addEventListener ("drop", function (ev) {ev.stopPropagation (); ev.preventDefault () Var file = ev.dataTransfer.files [0]; var reader = new FileReader () If (file.type.substr (0,5) = = "image") {reader.onload = function (event) {dest.style.background = 'url (' + event.target.result +') no-repeat center'; destinations [XSS _ clean] = ";} Reader.readAsDataURL (file);} else if (file.type.substr (0,4) = = "text") {reader.readAsText (file); reader.onload = function (f) {destp [XSS _ clean] = "" + this.result + "" Dest.style.background = "white";}} else {dest[ XSS _ clean] = "Preview of such files is not supported yet"; dest.style.background = "white";}}, false) } / / set page properties, do not perform default processing (refuse to be dragged and dropped) _ document.ondragover = function (e) {e.preventDefault ();}; _ document.ondrop = function (e) {e.preventDefault ();} _ window.onload=init; HTML5 file drag preview Demo file preview area, only pictures and txt files

Main code parsing

Let's not talk about the style part. It's very simple.

Dragover, dragend, and drop are three drag-and-drop related events.

Dragover indicates that the dragged and dropped element is moving within the scope of this element

Dragend indicates that the drag-and-drop operation ends

Drop indicates that other elements have been dragged and dropped into this element

The code first listens to these events, cancels the browser's default behavior, and then uses File and FileReader in HTML5 to determine whether to read the dragged file.

If the file is a picture, use FileReader's readAsDataURL method to read the picture as a DataURL string into memory and display it in DIV.

If the file is txt text, use the readAsText method of FileReader to read the file as text (the default is UTF-8 format), put it in memory, and then display it in DIV.

At this point, I believe you have a deeper understanding of "how to achieve drag and drop preview in HTML5". 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!