如何使用input type="file"

mui 框架自带的 Setting 模板会自动创建获取头像图片相关的功能，例如通过拍照或从手机相册中选择。

1. 拍照：其原理是通过调用 android 或 ios 系统的相机，并为拍摄的图片设置路径与名字，然后将该 URL 作为 ![]() 标签的地址。
2. 从手机相册中选择：比拍照更为简单，直接引用手机中已有图片的路径，将该 URL 作为 ![]() 标签的地址。

也就是说，MUI 框架模板的修改头像仅仅只是修改了 ![]() 标签的地址。那么该如何上传图片，真正意义上实现头像修改呢？

由于起初一直没能意识到 MUI生成的路径仅仅只是个字符串，而非是 file 对象，导致上传一直失败。心慌意乱之际，强迫自己冷静下来，仔细思索，再结合查阅所得资料，可以得出上传图片的两种形式：

1. H5 <input type="file" name="myFile" />标签：你可以直接用表单上传，也可以使用 ajax 来异步上传。该方法直接上传 file 对象，后台接受到的是一个完整的文件，因此可以直接将接受到的对象直接进行移文件操作。下面的代码运用的就是该方法。
2. base64 编码与解码：先在前端将图片转换（编码）成 base64 形式的字符串，然后将其传递给后台，后台获取到字符串（file_get_contents）后再将其解码，最后进行写文件操作（file_put_contents）。

HTML 部分：

<input id="file" type="file" name="file" />
<input type="button" onclick="XXX" value="上传头像" />

注意：查阅资料的时候发现一个“骚操作”：

js实现input:file的click事件

image.png

JS 部分：

var file = document.getElementById("file").files[0],        
     form = new FormData(),
     req = new XMLHttpRequest();
     form.append("file", file);
     req.onreadystatechange = function() {
        if(req.readyState === 4 && req.status === 200) {
            // 回调函数
        }
     req.open("post", 'URL', true);
     req.send(form);

PHP 部分：

if(isset($_FILES['file'])) {
    $file = $_FILES['file'];
    $uploadDir = 'head'.DIRECTORY_SEPARATOR;
    $dir = dirname(dirname(__FILE__)).DIRECTORY_SEPARATOR.$uploadDir;

    file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
    if(!is_array($file["name"])) {
        $fileName =  'picture.png';
        move_uploaded_file($file["tmp_name"], $dir.$fileName);
    }
}