本地图片和视频的预览

* 在form表单中选择视频和图片文件后，如果有在网页上预览的需求，可以通过H5提供的 FileReader 对象来实现

* FileReader - Web API | MDN、

* 案例 (本例只是展示如何获取到本地图片和视频的base64 url地址，实际项目中还会涉及到选中文件的删除等操作，需要处理好好表单文件对象和预览文件对象的映射关系，这里不做具体讨论。)

const picker = document.querySelector('#picker')
const shower = document.querySelector('.show')
picker.addEventListener('change', onChange, false)
function onChange(event) {
  const files = event.target.files
  files.length && showFiles(files)
}
function showFiles(files) {
  const ps = []
  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    const type = file.type.substr(0, 5)
    if (type === 'image' || type === 'video') {
      ps.push(FileFactory(type, file))
    }
  }
  Promise.all(ps)
}
function FileFactory(type, file) {
  return new Promise((res, rej) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function () {
      switch (type) {
        case 'image':
          shower.appendChild(Image(reader.result))
          break
        case 'video':
          shower.appendChild(Video(reader.result))
          break
      }
      res()
    }
  })
}
function Image(url) {
  const img = document.createElement('img')
  img.src = url
  return img
}
function Video(url) {
  const vdo = document.createElement('video')
  vdo.src = url
  vdo.controls = true
  return vdo
}