＜input type=‘file‘ ＞的选中对象信息获取的三种方法！

浏览器有禁止访问本地资源的限制！造成你想要获取到本地图片或者文件资源获取失败的问题！经过一些列的搜索！发现复制的别人复制的博客，简直千篇一律，有些时候并不是你想要的，例如我就是用的vue就不想引用太多js库，就直接用原生的去获取文件！
获取本地文件资源的有两种方式！另外一种是获取自己公司图片资源服务器的方式！
第一种是使用jquer + new FileReader()；
代码如下：

function toBase64(){
        var file = document.querySelector('input[type=file]').files[0];//获取到第一个input的type属性=file的input
        var reader = new FileReader();//构造一个新FileReader
        reader.onloadend = function () {//FileReader的触发事件【load】成功读取文件后会触发该事件，【loadend】文件读取成功或不成功时将触发该事件。【loadstart】文件读取操作开始时，将触发该事件。
            $("#base64Img").attr("style","display:inline-block");//使用jQuery的attr来设定节点样式
            $("#base64Img").attr("src",reader.result);//使用jQuery的attr来设定img标签的src路径，reader.result是FileReader读取时的二进制编码，img标签可以读取并展示！
            console.log(reader.result);//打印二进制数据
        }
        if (file) {
            reader.readAsDataURL(file);//该readAsDataURL方法用于读取指定Blob或的内容File。读取操作完成后，readyState变为DONE，并被loadend触发。那时，result属性包含数据作为数据：URL表示文件数据为base64编码的字符串
        }
    }

FileReader的方法如下：
abort**（）**释：该abort方法中止读取操作。返回时，readyState将为DONE。
语法：instanceOfFileReader.abort();
例外情况：
abort在没有进行任何读操作的情况下（即状态为not LOADING）引发when ；

readAsArrayBuffer**()** 释：该FileReader接口的readAsArrayBuffer()方法用于开始读取指定的内容，Blob或File。读取操作完成后，readyState变为DONE，并被loadend触发。那时，result属性包含一个ArrayBuffer表示文件数据的属性。
语法：instanceOfFileReader.readAsArrayBuffer(blob);
**readAsBinaryString（）**释：该readAsBinaryString方法用于开始读取指定Blob或的内容File。读取操作完成后，readyState变为DONE，并被loadend触发。那时，该result属性包含文件中的原始二进制数据。
**语法：**instanceOfFileReader.readAsBinaryString(blob);
**readAsDataURL（）**释：该readAsDataURL方法用于读取指定Blob或的内容File。读取操作完成后，readyState变为DONE，并被loadend触发。那时，result属性包含数据作为数据：URL表示文件数据为base64编码的字符串。
**语法：**instanceOfFileReader.readAsDataURL(blob);
**readAsText()**释：该readAsText()方法用于读取指定Blob或的内容File。读取操作完成后，readyState将更改为DONE，将loadend触发事件，并且该result属性将文件内容包含为文本字符串。
**语法：**instanceOfFileReader.readAsText(blob[, encoding]);
以上FileReader的方法摘自链接：FileReader
以上代码片段 摘自网友：彭珂个人网
链接：彭珂个人网
这是上传图片之前的图展示；

这个方法是使用jQuery的方法实现，上传图片展示这是上传之后展示的图片；

第二种，是我比较喜欢的方式，直接原生来解决，不用jQuery
话不多说直接上代码：
html：

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

js：

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

可视化效果链接：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
实现，上传立即预览的效果；
第三种获取自己公司图片资源服务器的方式；
直接上代码：

js：

tirggerFile(event){//<input type='file'/>标签绑定的事件
			var _this = this;
			var formData = new FormData();//该FormData()构造函数创建一个新的FormData对象。
			formData.append("file", event.target.files[0]);//将Event的target属性中files[0]这是多个files，如果是只选择单个则可以直接写file就行，根据自己需求来定
			_this.common.fileUploadOSS(formData,function(imgdata){   //这是发起ajax请求发送到服务器【我这是封装好的ajax请求】         
				_this.requestData.headPicUrl = imgdata.data.url;//再从服务器获取到图片路径数据
			});
		},

这种是先上传服务器，在获取服务器上这张图片的路径！

还有一种方法使用canvas获取到图片best64信息，代码如下：

let canva = document.createElement('canvas'), //创建canvas节点
	img = new Image() //构造一个image标签
	img.src = imgdata;//此处是已有的img信息，非input选取的文件信息，如果要获取选取文件的请参考上两条jQuery或原生js的方法

canva.width = this.$refs.mysvg.width.animVal.value;//给canvas赋值宽度
canva.height = this.$refs.mysvg.height.animVal.value;//给canvas赋值高度

var ctx = canva.getContext('2d');//开启2dcanvas模式
ctx.drawImage(img, 0, 0, this.$refs.mysvg.width.animVal.value, this.$refs.mysvg.height.animVal.value);//将创建的图片引入canvas做背景
document.getElementsByClassName('item2')[0].appendChild(canva);//插入到页面节点

var data = canva.toDataURL('image/svg');//获取canvas的背景图片的best64信息

希望以上对于浏览者有所帮助！好文后续分享！