Knowledge used in this article
File and filereader interfaces in HTML5
Related information:
Using files from Web Applications
File API
Running Effect
Note: You can drag images or TXT files on your computer to the DIV above to see the effect.
Source code
<! Doctype html > < Html > < Head > < Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" /> < Title > HTML5 file drag-and-drop preview demo </ Title > < Style Type = "Text/CSS" > H1 { 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 ; } </ Style > < Script Type = "Text/JavaScript" > 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.tar get. Result + ' ) No-repeat Center ' ; DeST. innerhtml = "" ;}; Reader. readasdataurl (File );} Else If (File. type. substr ( 0 , 4 ) = " Text " ) {Reader. readastext (File); reader. onload = Function (F) {DeST. innerhtml = " <PRE> " + This . Result + " </PRE> " ; DeST. style. Background = " White " ;}} Else {DeST. innerhtml = " Preview of such files is not currently supported " ; DeST. style. Background = " White " ;}}, False );} // Set page properties, do not execute default processing (refuse to be dragged and dropped) Document. ondragover = Function (E) {e. preventdefault () ;}; document. ondrop = Function (E) {e. preventdefault ();} window. onload = Init; </ Script > </ Head > < Body > < H1 > HTML5 file drag-and-drop preview demo </ H1 > < Div ID = "Show" > File preview area, only for images and TXT files </ Div > </ Body > </ Html >
Main Code Analysis
The style part is simple.
Dragover, dragend, and drop are three drag-and-drop events.
Dragover indicates that the drag-and-drop element is moving within the range of the element.
Dragend indicates that the drag-and-drop operation is complete.
Drop indicates that other elements are dragged to the base element.
The code first listens to these events, cancels the default behavior of the browser, and then uses the file and filereader in html5.
If the file is an image, use the readasdataurl method of filereader to read the image as a dataurl string and store it in the memory and display it in the div.
If the file is TXT text, use the readastext method of filereader to read the file as text (in UTF-8 format by default), put it in memory, and then display it in Div.