图片上传
2017-09-26 本文已影响5人
郝特么冷
近期公司这边也做图片上传展示，朋友那边也做这个功能，我自己写了几个demo来实现这些效果。
这里我强调下，在Chrome浏览器和大部分浏览器的极速模式下，也就是说是在webkit内核中没问题。
我用的方法是通过FileReader来实现的。具体的代码展示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function fileUpload_PrevImageFile(f){
if (typeof FileReader == 'undefined') {
alert("当前浏览器不支持filereader对象");
}
var strHTML = "";
for (var intI = 0;intI < f.length; intI++) {
var tmpFile = f[intI];
var reader = new FileReader();
reader.readAsDataURL(tmpFile);
reader.onload = function(e){
strHTML = strHTML + "<span>";
strHTML = strHTML + "<img src = '"+e.target.result+"' alt=''/>";
strHTML = strHTML + "</span>";
$$('ulUpload').innerHTML = "<li>"+strHTML+"</li>";
}
}
}
</script>
</head>
<body>
<form action="" method="post" id="frmTmp">
<fieldset id="">
<legend>预览图片：</legend>
<input type="file" name="fleUpload" id="fleUpload" value="" onchange="fileUpload_PrevImageFile(this.files);" multiple="true"/>
<ul id="ulUpload"></ul>
</fieldset>
</form>
</body>
</html>
展示效果.png
FileReader对象，这里我要着重介绍下，这是个H5的对象，这个不仅可以读取图片还可以读取文本文件或者二进制文件。并且能够根据该接口提供的事件与方法动态侦查文件读取时的详细状态。
接口FileReader中的常用方法
| 名称 | 参数 | 功能 | 说明 |
|---|---|---|---|
| readAsBinaryString() | fle | 以二进制的方式读取文件内容 | 调用该方法时，将file对象返回的数据块，作为一个二进制字符串形式，分块读入内存中 |
| readAsArrayBuffer() | file | 以数组缓存的方式读取文件内容 | 调用该方法时，将fle对象返回的数据字节数，以数组缓存的方式读入内存中 |
| readAsDataURL() | fil | 以数据URL的方式读取文件内容 | 调用该方法时，将file对象返回的数据块，以一串数据URL字符的形式展示在页面中，这种方法一般读取数据块较小的文件 |
| readAsText() | file,encoding | 以文本编码的方式读取文件内容 | 调用该方法时，其中encoding参数表示文本文件编码的方式，默认值utf-8，即以utf-8编码格式将获取的数据块按文本方式读入内存中 |
| abort() | 无 | 读取数据中止时，将自动触发该方法 | 如果在读取文件数据过程中出现异常或者错误时，触发该方法，返回错误代码信息 |
FileReader对象中的状态事件
| 事件 | 描述 |
|---|---|
| onabort | 数据读取中断时触发 |
| onerror | 数据读取出错时触发 |
| onloadstart | 数据读取开始时触发 |
| onprogress | 数据读取中 |
| onload | 数据读取成功完成时触发 |
| onloadend | 数据读取完成时触发，无论成功或失败 |
