使用的框架为JQuery, CodeIgniter(PHP), VueJS
总体步骤包括如下几点:
1. 选择要上传的图片
2. 使用FileReader对象预览图片
3. 将图片存入FormData对象
4. 通过ajax提交
5. 使用CodeIgniter上传类上传图片
FileReader及FormData都是H5新增的API, 首先要确保你的浏览器支持这些API, 可使用typeof 检测
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
alert('你的浏览器不支持FileReader');
}
开始第一步, 选择图片:
我的思路是这样的, 先做一个input[type=file], 将它display:none, 在做一个label并通过id关联该input, 当点击该label时即可触发input
<input type="file" name="avatar" accept="image/png,image/gif" id="avatar" class="avatar-upload" @change="avatarChange">
<form action="javascript:;" method="post" name="register" accept-charset="UTF-8">
<p class="avatar-container">
<label for="avatar" class="click-avatar" title="点击上传头像"></label>
<img src="./FE/img/user.png" class="avatar">
</p>
...
注:这里我给input设置了accept 属性来限制用户可选的文件MIME类型 ; 并且我将input设置到了表单外, 这也不会影响label触发input的
第二步, 选择图片后预览:
首先给input绑定change事件, 在用户选择完图片后触发 ; 再创建FileReader对象读取图片信息, 并返回图片的base64编码 ; 修改img的src属性, 完成预览.
这里我就直接粘图啦 ~
FileReader的全部接口如下:
1. FileReader接口的方法
FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
方法名 | 参数 | 描述 |
---|---|---|
readAsBinaryString | file | 将文件读取为二进制编码 |
readAsText | file,[encoding] | 将文件读取为文本 |
readAsDataURL | file | 将文件读取为DataURL |
abort | (none) | 终止读取操作 |
2. FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。
事件 | 描述 |
---|---|
onabort | 中断 |
onerror | 出错 |
onloadstart | 开始 |
onprogress | 正在读取 |
onload | 成功读取 |
onloadend | 读取完成,无论成功或失败 |
附注: 原来图片的src属性也是支持base64编码的, 涨姿势了 ~
接着第三步和第四步:
'upload': function (id) {
var formData = new FormData();
// 通过input[type=file]的files属性获取选择的文件对象
var file = $('#avatar')[0].files[0];
// 使用append方法向formData中添加字段
formData.append('avatar', file);
formData.append('id', id);
$.ajax({
url: 'index.php/change_avatar',
type: 'post',
data: formData,
// jq使用FormData上传文件时时一定要加上这两项
contentType: false,// 告诉jQuery不要去处理发送的数据
processData: false,// 告诉jQuery不要去设置Content-Type请求头
....
});
最后在php中接收文件并上传:
使用CI只需要简单的几步即可实现上传, 关键方法只有三个, do_upload, data, display_errors.
public function uploadImg()
{
$config = array(
'upload_path' => './uploads/img/',
'allowed_types' => 'gif|png',
'max_size' => '2048',
'max_width' => '1200',
'max_height' => '1200',
'file_name' => random_string('alnum', 16)
);
// 先加载上传类, 并将配置参数传入
$this->load->library('upload', $config);
// do_upload参数为上传文件的字段名,成功返回true,反之失败
if ($this->upload->do_upload('avatar'))
{
// 上传成功返回文件信息
$data = $this->upload->data();
return $data;
}
else
{
// 上传失败返回错误信息
$error = array('upload_error' => $this->upload->display_errors());
$this->return_error($error);
}
}
OK, 这样一个JQ和CI制作的图片ajax预览上传就完成啦 ;-)