This chapter explains how to use the file API and the drag-and-drop API in HTML 5. HTML5 's file API, which allows you to directly display information about a client file or the contents of a file in a browser, and drag-and-drop APIs, you can drag a file that resides in the client directly to the browser, or you can drag the elements in the page or the contents of the element individually. HTML5 drag-and-drop file preview:
Online Demo Previously, we used the file control, and after clicking the Upload button, we selected the files on the computer. In HTML5, we can first drag the files on the computer directly into the browser to preview, make sure the file is what we need, and then click the Upload button to the file upload to the server side. We use the Gctasbinary method of the file object provided by the Firefox browser and the Sendasbinary method of the XMLHttpRequest object to upload the file. Because of the limited conditions, this example only explains the ability to drag and drop files from the client computer into a browser for previewing. Not all files can be previewed, here we only explain the picture file and text file preview. If the user drags a text file, the file preview area displays the contents of the text file after the drag is finished. In addition, if we drag and drop larger image files or text files into the file preview area, the size of the image file or text file will be displayed beyond the size of the file preview area. For this case, specify the resize style for the DIV element used in the file preview, so that the user can zoom in on the file preview area by dragging the lower-right corner of the file preview to make it fully visible in the picture or content. The HTML 5 knowledge points used in this example, the file API and drag-and-drop api 1. File api HTML5 provides an API for manipulating files, which makes it easy to access the local file system from a Web page. The file API is primarily used with the FileReader interface. In HTML 5, the file object represents one of the files on the client computer that has two properties, and the Name property represents the file name (not including the path) The LastModifiedDate property represents the last modified date of the document. In HTML 5, you can use the FileReader interface to read the file into memory and read the data in the file. The FileReader interface has 4 methods, 3 for reading the file, and the other for interrupting the read process. The 4 methods and their parameters and capabilities are listed in the table below.It is important to note that, regardless of the read success or failure, the result does not return a read result, which is stored in the result property. Lereader interface Method: ┏━━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━━━━━┓┃Method Name┃Parameters┃Description ┃┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫┃readasbinarystring ┃ file  ┃&N Bsp Read file As binary code ┃┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫┃  RCADASTCXT ┃file, [encoding] ┃ to read the file as text &NBS P ┃┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫┃readasdataurl ┃& nbsp file ┃ file read as Dataurl ┃┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫┃ abort ┃ (none) ┃ Interrupt read operations ┃┗━━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━━━━━┛
readasbinarystring: This method reads the file as a binary string, transmits the string to the backend, and the backend can store the file through the string. Mouth
Rcadastext: This method has two parameters, where the second parameter is the encoding of the text, and the default value is UTF-8. The file is read as text and the result of reading is this text. Mouth
Readasdataurl: This method reads a file as a string of data URLs. (This method typically reads a file in a format such as an image and HTML directly into the page in a specially formatted URL address.) In addition to the above methods, the FileReader interface also contains events that capture the state when the file is read, such as the following table. Event for FileReader interface: ┏━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━┓┃Events┃Description ┃┣━━━━━━━━╋━ ━━━━━━━━━━━━━━━━━━━┫┃ onabon ┃ Data read interrupt triggered ┃┣━━━━━━━━╋━━━━━━ ━━━━━━━━━━━━━━┫┃ onerror ┃ Data read error triggers &NBS P ┃┣━━━━━━━━╋━━━━━━━━━━━━━ ━━━━━━━┫┃ onloadstart ┃ Data read start trigger ┃┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ &nbs P;onprogress ┃ Data read &NBS P &NBSP ┃┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃   , onload ┃ When data read is completed successfully, &NBS P ┃┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ onloadend &N Bsp ┃ Triggered when data read is complete, regardless of success or failure ┃┗━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━┛ 2. Drag-and-drop api HTML 5 provides an API to support drag-and-drop operations, and we can use MouseDown, MouseMove, and MouseUp to implement drag-and-drop operations before HTML 5. However, these events only support drag-and-drop within the browser, while HTML 5 can support the drag of data between the browser and other applications.
steps to implement file drag and drop in HTML5: 1) Set the Draggable property of the object element you want to drag to True (Draggable=¨true¨) so that the element can be dragged and dropped. In addition, by default, the drag-and-drop IMG element and the A element (must specify HREF) 2) write event-handling code related to drag-and-drop. Drag and drop related events in the following table.
Related events for drag and drop: ┏━━━━━━━┳━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━┓┃Events┃ the element that generated the event ┃Description ┃┣━━━━━━━╋━━ ━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ dragstart ┃ Drag-and-drop elements & nbsp ┃ &N Bsp Start drag-and-drop operation &NB sp;┃┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ drag ┃ Drag-and-drop elements ┃ &N Bsp Drag-and-drop process &NBSP ; ┃┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ Dragcnter ┃ Drag-and-drop elements ┃ dragged elements begin to enter the fan circle of this element ┃┣━━━━━━━╋━━━━━━━━━━ ━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ dragover ┃ mouse-over elements during drag-and-drop ┃ dragged elements moving around in this element circle ┃┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ dragleave ┃ Drag-and-drop elements ┃ The dragged element leaves the scope of this element ┃┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫┃ drop &nbs P ┃ Drag-and-drop target elements & nbsp ┃ have other element edges dragged into this element ┃┣━━━━━━━╋━━━━━━━━━━━━━ ━━╋━━━━━━━━━━━━━━━━━━━━┫┃ dragend ┃ Drag-and-drop object elements &NBS P &NBsp ┃ Drag and drop end &NB Sp ┃┗━━━━━━━┻━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━ ━━┛ In addition, there is a DataTransfer object in the drag-and-drop API that is used to hold the data that you want to carry when you drag and drop. We can use the object's Files[0] property to refer to a file that is dragged into the preview area of the file.var file-ev. datatransfer. files [O];
This article code download:Html5drag_html5star.html
HTML5 file Drag-and-drop API explanation
