移动端拍照上传功能简介

此功能主要借助H5提供的新标签和新接口：

input type=file new FormData

拍照显示功能的实现

调用系统默认的相机、相册、摄像机、录音功能

function readFile(input){
  if(typeof FileReader == "undefined") {
    alert("您的浏览器不支持HTML5的FileReader接口，请更换浏览器")
    return
  }
  //这里是获取单张图片，如若获取多张，则为this.files
  let fl = input.files[0] 
  //此处还可以获取文件类型和大小
  let type = fl.type.split("/")[0]
  if(type !== "image"){
    alert("请上传图片")
    return
  }
  let size = Math.round(fl.size/1024/1024)
  if(size > 5){
    alert("图片大小不得超过5M")
    return 
  }
  //初始化一个文件读取对象
  let fr = new FileReader() 
  fr.onload = function(e){
    //在这里做你想做的事情
    $("img").attr("src", e.target.result)
  }

  fr.readAsDataURL(fl)

}

$("input").on("change", function(){
  //调用上述函数
  readFile(this)
})

FileReader对象介绍

readAsDataURL():将文件读取为base64的格式，作为图片的src

result属性: 将读取的数据保存在result中

progress事件:定时触发，可以获取当前已上传文件的大小，如进度条

load事件: 文件上传时触发

loadend事件: 文件上传完成时触发，不论文件上传是否成功都将触发

具体可参阅MDN上关于[FileReader的解释]

  fr.onloadstart = function(){ console.log("start")}

  fr.onprogress = function(e){ 
    let tip = '已完成' + Math.round(e.loaded / e.total * 100) + '%'
    $(".file-upload").find(".progress").text(tip)
    console.log("uploading") //文件较大时会出现多个uploading
  }

  fr.onabort = function(){
    console.log("cancel") //取消上传功能
  }

  fr.onerror = function(){
    console.log("error")
  }

  fr.onload = function(){
    console.log("complete")
  }

文件上传功能的实现

此处上传功能的实现依赖于FormData, FormData是在XMLHttpRequest2级定义的，是为序列化表单以及创建与表单格式相同相同的数据提供便利。以下是其基本的使用方法：

构造函数

创建一个FormData对象实例：

var fd = new FormData();

添加数据

fd.append("file", fl)
fd.append("fileName", fl["name"])

向FormData中添加数据主要用到其append方法，当然还有其他方法，如get、getAll、delete、set、has，具体介绍见[FormData详解]

上传数据

$.ajax({
  type: "post",
  data: JSON.stringfy(fd),
  url: "api/upload",
  success: function(res){/* do something*/}
})

备注：如果你单纯的查看FormData对象的实例fd，那么你是查看不了的，直观感觉是一个空对象，你需要使用get或getAll方法查看