[Read Notes] front-end local file operations and uploads

Link (https://juejin.im/post/5a193b4bf265da43052e528a)
# # # front-end local file operations and uploads
The front-end can not be as direct as the native app to manipulate local files, otherwise open a Web page will be able to steal the files on the user's computer, so it needs to be triggered by the user.
This article mainly describes the three types of file triggering methods
# # # Three ways
1. Select local file via input type= "file"
2. Drag and drop the file over
3. Copy and paste in the edit box
* * Note: The third way of pasting refers to the keyboard paste, the right mouse button paste does not work * *

# # # What did you learn from this article?
Previously only understand input type= "file" to process files, through this article and get to the other two processing file form

Processing get to the two new file read form also get to some of the operation files related content, as follows:
# # # #1. Three formats for file reads
A. Read by Base64, the result is Base64, any file can be turned into base64 form

```
Filereader.readasdataurl (This.files[0]);
```
B. read in binary string, the result is the Utf-8 form of binary content, has been discarded

```
Filereader.readasbinarystring (This.files[0]);
```
C. read in the original binary mode, the read result can be directly converted into an array of integers

```
Filereader.readasarraybuffer (This.files[0]);
```
# # # #2. In three ways, the location of the file object
A. Input type= "file"

```
This.files[0]
```
B. The way of dragging

```
In the DataTransfer object of the event
Event.originalevent.datatransfer.files[0]
```
C. Copy and paste inside the edit box

```
Inside the Event.clipboardData.files:
Event.originalevent.clipboarddata.files[0]
```
# # # #3. Get to a data storage format blob that can store content in almost any format
A. How to convert a local image address into a BLOB format

'
<script>
var eleappend = document.getElementById ("Forappend");
window. URL = window. URL | | Window.webkiturl;
if (typeof history.pushstate = = "function") {
var xhr = new XMLHttpRequest ();
Xhr.open ("Get", "./hot.png", true);
Xhr.responsetype = "blob";
Xhr.onload = function () {
if (this.status = =) {
var blob = this.response;
var img = Document.createel Ement ("img");
Img.onload = function (e) {
window. Url.revokeobjecturl (IMG.SRC); Clear Release
};
Img.src = window. Url.createobjecturl (BLOB);
Eleappend.appendchild (IMG);
}
}
Xhr.send ();
} else {
eleappend.innerhtml = ' <p style= "color: #cd0000;" > Please replace browser retry ~</p> ';
}
//blob:http://localhost:63342/02d0f649-b359-42c6-80d0-b66f2e4d2d0f
</script>
"'
B. Gets the local BLOB data

```
$ (' #forAppend '). Bind (' Paste ', function (event) {
Need to settimeout 0 and other pictures come out and then deal with
SetTimeout (() = {
Let img = $ (this). Find ("img[src^= ' blob ')") [0];
Get BLOB data with a XHR
Let xhr = new XMLHttpRequest ();
Xhr.open ("GET", IMG.SRC);
Change MIME type
Xhr.responsetype = "blob";
Xhr.onload = function () {
Response is a BLOB object
Console.log (This.response);
Readblob (This.response);
Blob {size:0, type: "Text/plain"}

};
Xhr.send (This.response);
}, 10);
});
```
# # # #4. API for processing and uploading files above
##### #1. window. URLs and Window.webkiturl
property returns an object that provides a static method for creating and managing an object's URLs. It can also be called as a constructor to construct a URL object
Call a static method:

```
img.src = window. Url.createobjecturl (BLOB);
```
Constructs a new object:

```
var url = new URL (".. /cats/"," https://www.example.com/dogs/");
```

Window.webkiturl Usage and window. URL is the same for mobile phone side
##### #2. API for converting between strings and Base64
```
Window.atob (base64)--string
Example:
Window.atob ("bgl1c2hpexu=")
"Liushiyu"
Window.btoa (content)-Base64
Example:
Window.btoa (' Liushiyu ')
"Bgl1c2hpexu="
```

[Read Notes] front-end local file operations and uploads