图片上传实时预览

文献种类：专题技术文献；
开发工具与关键技术：VS C# JavaScript
作者： 汤池 ；年级：20级 ；撰写时间： 2021 年 6月 18日
文献编号： 归档时间： 年 月 日
图片上传实时预览

开发工具与关键技术： VS JavaScript
作者：汤池
撰写时间：2021/ 06/18
1.首先我们需要一个img标签放在需要显示的位置上面，因为选上传文件的标签无法去显示选择的图片

2.让type为file的input标签设置为hidden，隐藏，给img设置双击事件来代点隐藏的input标签,$(img).dbclick(function{ $(input).click() });

3.创建FileReader对象并调用其方法：
用var声明imgReader = new FileReader();这是一个文件读取器，FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功
能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF­8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，
Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

4.KaTeX parse error: Expected '}', got 'EOF' at end of input: …声明变量来获取接受到的图片文件("#userPhoto").get(0).files[0];，
然后使用 imgReader.readAsDataURL(file);这样文件就被读取到了
当然我们也可以在这之前声明正则来验证图片是否为图片
})

5.FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，

最后调用 imgReader.onloadend = function (event) {
将img的src换成event.target.result即可实时预览图片
$(img).attr(“src”, event.target.result);
}