h5上传图片，修改用户头像

一、如何触发上传文件

html：

<input accept="image/*" type="file" id="picInput" style="display: none;">

说明：

accept属性—— 一个字符串，用于定义文件输入应接受的文件类型。此字符串是以逗号分隔的唯一文件类型说明符列表。由于可以以多种方式识别给定的文件类型，因此在需要给定格式的文件时提供一组完整的类型说明符很有用。

我这里是指定image文件。

来自MDN的例子：

<input type="file" id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

style：设置隐藏样式，将上传文件的按钮隐藏起来，通过其他方式触发，比如说点击用户头像，用js再触发点击上传文件。

二、上传文件的时候

#picInput还需要绑定一个监听事件——change，当监听到上传文件的时候，开始下一步处理，比如说检测文件大小时候符合规范，把图片传给后台之类的动作。

picChanged: function (event) {
  var reader = new FileReader();
  var AllowImgFileSize = 2 * 1024 * 1024; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
  var file = $("#picInput")[0].files[0];
  var imgUrlBase64;

  if (file) {
    imgUrlBase64 = reader.readAsDataURL(file);
    reader.onload = function (e) {
        if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
           console.log("文件大小不符合规范！")                 
           return;
        }else {
           console.log('请稍后,上传头像中...')
           request(requestUrl, {
             //参数
           },function () {
             error('网络错误')
           },function (result) {
                //上传成功！
           })
        }
    }
  }
}

上面不懂的属性自己查一下，到此，上传功能就算是完成了！