图片选择并显示

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe JavaScript

作者：陈钰桃

撰写时间：2020年8月25日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

成果图

图片选择并显示

1、选择：

function showImageSelectDialog() {

//使用jquery触发文件选择框的点击事件

$("#studentPictureFile").click();

}

2、正则验证图片并绑定图片

图片文件正则表达式过滤 image/jpeg,image/png,image/png,image/jpg,image/gif,image/bmp

regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;

3、文件读取器

3.1调用FileReader对象的方法

var imgReader = new FileReader();

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	none(无)	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF8。这个方法非常容易理解，将文件以文本方式

读取，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，

Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3.2文件选择控件改变事件 -- 将选择的图片显示到 img元素

function loadImgToImg() {

//选取选择图片

//注意：ID获取的是input标签，不是image图片

var imgfFile = $("#studentPictureFile").get(0).files[0];

console.log(imgfFile);

//判断选择的文件扩展名是否符合正则表达式

if (regexImageFilter.test(imgfFile.type)) {

//使用FileReader读取图片并转为URL

imgReader.readAsDataURL(imgfFile);

} else {

alert("选择的不是一个有效的图片文件");

}

3.3文件读取 onload事件，将读取到图片显示的到Img元素

imgReader.onload = function (evt) {

console.log(evt);

$("#studentPicture").attr("src", evt.target.result);

}

处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

FileReader例子:下面通过一个上传图片预览和带进度条上传来展示FileReader的使用

function showPreview(source) {

var file = source.files[0];

if(window.FileReader) {

var fr = new FileReader();

fr.onloadend = function(e) {

document.getElementById("portrait").src = e.target.result;

};

fr.readAsDataURL(file);

}

</script>