javascript结合fileReader 实现上传图片

对于FileReader这个强大的工具，它支持的方法与事件繁多，详细的介绍建议前往w3c官网查看。而我们今天主要来一下FileReader在实际应用中的常见用途，以及如何通过FileReader实现图片上传的示例。

借助File API的助力，我们可以通过FileReader接口异步地将文件内容加载到内存中。这一功能在web开发中极为实用，尤其是处理用户上传的文件时。

下面这段代码展示了如何使用FileReader实现图片上传并预览的功能：

```javascript

function getImgSrc(target, callback) {

if (window.FileReader) { // 检查浏览器是否支持FileReader

var oPreviewImg = null; // 用于存储预览图片的变量

var oFReader = new window.FileReader(); // 创建FileReader对象

oFReader.onload = function (oFREvent) { // 当文件读取完成时的回调函数

oPreviewImg = new Image(); // 创建新的图片元素

var type = target.files[0].type.split("/")[1]; // 获取文件类型

var src = oFREvent.target.result; // 获取文件的内容（Base64编码）

oPreviewImg.src = src; // 设置图片源为文件内容

if (typeof callback == "function") { // 如果传入了回调函数，则执行

callback(oPreviewImg, target, type, src);

}

return oPreviewImg.src; // 返回图片的源地址

};

// 读取文件的操作

(function () {

var aFiles = target.files; // 获取选中的文件列表

if (aFiles.length === 0) { // 如果没有选中文件，则不进行操作

return;

}

if (!IsImgType(aFiles[0].type)) { // 检查文件是否为图片类型

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

return;

}

if (aFiles[0].size > 1024 1024) { // 检查文件大小是否超过1MB

target.value = ""; // 清空选择的文件

alert('请上传小于1MB的图片文件。');

return;

}

oFReader.readAsDataURL(aFiles[0]); // 读取文件内容

})();

} else { // 如果浏览器不支持FileReader，针对IE浏览器进行处理（这里仅为示例）

if (navigator.appName === "Microsoft Internet Explorer") { // 判断是否为IE浏览器

document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = target.value; // 设置图片预览的src为文件路径

}

}

}

```

这段代码首先检查浏览器是否支持FileReader，然后获取用户选择的文件，判断文件类型并读取文件内容。对于图片文件，将其显示在网页上供用户预览。也考虑了不支持FileReader的浏览器（如IE），提供了相应的处理方式。这样，无论用户使用的是何种浏览器，都能实现图片上传和预览的功能。这段代码的关键在于利用FileReader的readAsDataURL方法读取文件内容，并将其显示在网页上。至于Cambrian的渲染部分（`cambrian.render('body')`），未在代码片段中具体体现其用途和关联，因此无法提供详细的解读。希望以上关于FileReader在图片上传中的应用介绍能对你有所帮助。