input[type=file]获取文件信息，展示、上传

实现效果：

<!-- 上传图片 -->
<div class="listBox flex imgBox">
	<div class="label">专题图片：</div>
	<input type="file" class="userName right file" accept="image/*" />
</div>
<!-- 预览图片 -->
<div class="listBox flex showImg">
	<img src="" alt="" class="previewImg" />
</div>

$('.file').change(function(){
	let resultFile = $(this)[0].files;
	file = resultFile;
    console.log('文件信息---',$(this)[0].files)
	
	/* 文件预览：
	重新创建一个FileReader对象，使应用程序异步读取存放在计算机上的文件内容；
	readAsDataURL：新建的FileReader对象读取需要读取的文件。已返回读取的文件内容,
	data内容为base64数据。
	*/
	
 	if (resultFile[0]) {
          let reader = new FileReader();              
          reader.readAsDataURL(resultFile[0]);
          reader.onload = function (e) {
             	$('.previewImg').attr('src',this.result);
          }
    }
});

文件读取成功result属性data值展示：
(内容太长只截取部分仅供参考)

更多精彩可以查看：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
文件信息打印如下：