1. File API: (File API)
Each file selected by a file type form control is a file object, and the FileList object is a collection list of these file objects, representing all the selected files. The file object inherits from a Blob object, which represents binary raw data and provides a slice method to access the original data blocks inside bytes. In short, the file object contains the FlieList object, and the file object inherits from the Blob object!
Relevant attribute relationships of each object:
FileReader interface:
As can be seen from the figure, HTML5 also provides a FileReader interface: used to read files into memory and read data in the file.
var reader=new FileReader();
There are four methods and six events in total for this interface:
•readAsBinaryString(file): read file as binary
•readAsDataURL(file): read file DataURL
•readAsText(file,[encoding]): read file as text
•about(none): interrupt file reading
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
•onabort: Triggered when reading file interrupts
•onerror: Triggered when an error occurs when a file is read
•onloadstart: Triggered when reading the file starts
•onprogress: keeps triggering when reading the file
•onload: Triggered when the file is read successfully
•onloadend: Triggered at the end of reading the file (both success and failure are triggered)
The above event parameters e have e.target.result or this.result point to the read result!
2. Drag and drop API:
Drag and drop attribute: Set the dragable attribute of the element that needs to be dragged and dropped to true (dragable=”true”)! The img element and a element can be dragged and dropped by default.
Drag and drop events: (Segmented into drag and drop element events and target element events)
Drag and drop element events:
•dragstart: Triggered before dragging
•drag, triggers continuously before and after dragging
•dragend, the drag end triggers
Target element event:
•dragenter, enter the target element to trigger
•dragover, between entering the target and leaving the target, triggering continuously
•dragleave, triggering the target element
•drop , release the mouse trigger on the target element
but! It should be noted that in the target element, the default behavior should be blocked (dragover and drop are refused) in the dragover and drop events, otherwise dragging and drop cannot be implemented!
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DataTransfer object: It is specially used to store data to be carried during drag and drop. It can be set as the dataTransfer property of drag and drop events.
3 attributes:
•effectAllowed: Set cursor styles (none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized)
•effectAllowed: Set the visual effects of drag and drop operations
•types: the type of data stored, a pseudo-array of strings
•files: Get the external dragged file, return a fileList list, there is a type attribute under filesList, which returns the file type
4 methods:
•setData(): Set the data key and value (must be a string)
•getData(): Get data, and obtain the corresponding value according to the key value.
•clearData(): Clear the data stored in the DataTransfer object
•setDragImage(imageUrl,log x,long y): Use the img element to set the drag and drop icon
//Example:
target.addEventListener('dragstart',function(e){
var fs = e.dataTransfer.files;//Get drag and drop file object list FlieList object
var dt=e.dataTransfer;// dataTransfer property as drag and drop event
dt.effectAllowed='copy';
dt.setData('text/plain','hello');
dt.setDragImage(dragIcom,-10,-10);
});
3. Drag and drop upload image preview:
Ideas:
1. Familiar with the four events of the file dragging target element. Note: the default behavior is blocked in the ondragover and ondrop events.
2. After dragging and dropping, get the file object collection: e.dataTransfer.files
3. Loop every file object in the collection, judge the file type and file size, and perform corresponding operations if the type is specified.
4. Read file information object: new FileReader(), which has methods such as reading file object as DataUrl: readAsDataURL (file object), events triggered after successful reading: onload event, etc., this.result is the read data
5. Perform corresponding logical processing in several events in the FileReader object
HTML:
<div> <p>Please drag the image file to this area! </p></div>
Total load count: <span id='total'>100</span>
JQ:
<script type="text/javascript"> $(function() { /*Thoughts: *1. Be familiar with the four events of the target element of the file dragging target. Note: the default behavior is blocked in the ondragover and ondrop events*2. After dragging and dropping, get the file object collection: e.dataTransfer.files *3. Loop each file object in the set, judge the file type and file size, and perform corresponding operations if it is a specified type*4. Read the file information object: new FileReader(), which has methods such as reading the file object as DataUrl: readAsDataURL (file object), and the events triggered after the reading is successful: onload event, etc., this.result is the data read*5. Perform corresponding logical processing in several events in the FileReader object* */ //The jq object must be converted into a js object and the native method var oDiv = $(".container").get(0); var oP = $(".text"); //Enter oDiv.ondragenter = function() { oP.html(''); } //Move, the default behavior needs to be blocked, otherwise the file oDiv.ondragover = function(e) { e.preventDefault(); } //Leave oDiv.onleave = function() { oP.html('Please drag the image file to this area!'); } //Drag and place, the default behavior needs to be blocked oDiv.ondrop = function(e) { e.preventDefault(); //Get dragged objects, file object collection var fs = e.dataTransfer.files; //If the file selected for the file tag in the form field, use form[form name].files[0] to get the file object collection//Print length console.log(fs.length); //Loop multi-file drag upload for (var i = 0; i < fs.length; i++) { //File type var _type = fs[i].type; console.log(_type); //Judge file type if (_type.indexOf('image') != -1) { //File size control console.log(fs[i].size); //Read file object var reader = new FileReader(); //Read as DataUrl, no return value reader.readAsDataURL(fs[i]); reader.onloadstart = function(e) { //Start loading} //This event is triggered in progress reader.onprogress = function(e) { $("#total").html(e.total); } //Freeze when the read is successful, this.result is the read file data reader.onload = function() { //File data// console.log(this.result); //Add file preview var oImg = $("<img style='width:100px;' src='' />"); oImg.attr("src", this.result); $(oDiv).append(oImg); //ODiv converts to js object to call method} //Reader.onloadend will be triggered regardless of success or not. Reader.onloadend = function() { if (reader.error) { console.log(reader.error); } else { //There is no error in uploading, ajax sends the file, upload binary file} } } } else { alert('Please upload the image file!'); } } } } }); </script>Reproduction image:
Summary: Combining knowledge of drag and drop event API, DataTransfer object and file reading object FileList, etc., to achieve the preview effect of simple drag and drop uploading of images. You need to know the relationship and usage of an object and clarify the implementation ideas!
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.