首页 > Web开发 > 详细

[阅读笔记]前端本地文件操作与上传

时间:2017-11-30 18:46:00      阅读:361      评论:0      收藏:0      [点我收藏+]

[链接](https://juejin.im/post/5a193b4bf265da43052e528a)
### 前端本地文件操作与上传
前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发。
该文章主要讲述了三种文件触发的方式
### 三种方式
1. 通过input type="file"选择本地文件
2. 通过拖拽的方式把文件拖过来
3. 在编辑框里面复制粘贴
**注:第三种方式中的粘贴指的是键盘的粘贴,鼠标的右键粘贴不起作用**

### 通过这篇文章学到了什么?
之前只了解 input type="file"来处理文件,通过这篇文章又get到了其他两种处理文件的形式

处理get到了两种新的文件读取形式之外还get到了一些操作文件的相关内容,具体如下:
#####1. 文件读取的三种格式
a.按base64的方式读取,结果是base64,任何文件都可转成base64的形式

```
fileReader.readAsDataURL(this.files[0]);
```
b. 以二进制字符串方式读取,结果是二进制内容的utf-8形式,已被废弃了

```
fileReader.readAsBinaryString(this.files[0]);
```
c.以原始二进制方式读取,读取结果可直接转成整数数组

```
fileReader.readAsArrayBuffer(this.files[0]);
```
#####2. 三种方式中,文件对象的位置
a. input type="file"

```
this.files[0]
```
b. 拖拽的方式

```
// event的dataTransfer对象里
event.originalEvent.dataTransfer.files[0]
```
c. 编辑框里面复制粘贴

```
// 在event.clipboardData.files里面:
event.originalEvent.clipboardData.files[0]
```
#####3. get到了一种数据存储格式blob ,可以存储几乎任何格式的内容
a. 如何将本地的图片地址转化为blob格式

```
<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 == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // 清除释放
};
img.src = window.URL.createObjectURL(blob);
eleAppend.appendChild(img);
}
}
xhr.send();
} else {
eleAppend.innerHTML = ‘<p style="color:#cd0000;">请更换浏览器重试~</p>‘;
}
// blob:http://localhost:63342/02d0f649-b359-42c6-80d0-b66f2e4d2d0f
</script>
```
b. 获取本地的blob 数据

```
$(‘#forAppend‘).bind(‘paste‘, function (event) {
// 需要setTimeout 0等图片出来了再处理
setTimeout(() => {
let img = $(this).find("img[src^=‘blob‘]")[0];
// 用一个xhr获取blob数据
let xhr = new XMLHttpRequest();
xhr.open("GET", img.src);
// 改变mime类型
xhr.responseType = "blob";
xhr.onload = function () {
// response就是一个Blob对象
console.log(this.response);
readBlob(this.response);
// Blob {size: 0, type: "text/plain"}

};
xhr.send(this.response);
}, 10);
});
```
#####4. 上面处理和上传文件的API
######1.window.URL 和 window.webkitURL
属性返回一个对象,它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 URL 对象
调用一个静态方法:

```
img.src = window.URL.createObjectURL(blob);
```
构造一个新对象:

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

window.webkitURL 用法和window.URL 相同用于手机端
######2. 字符串和base64之间转换的API
```
window.atob(base64) --> string
例子:
window.atob("bGl1c2hpeXU=")
//"liushiyu"
window.btoa(content) --> base64
例子:
window.btoa(‘liushiyu’)
// "bGl1c2hpeXU="
```

[阅读笔记]前端本地文件操作与上传

原文:http://www.cnblogs.com/qinmengjiao123-123/p/7930221.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!