JS及PHP制作ajax图片上传详解

使用的框架为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预览上传就完成啦 ;-)