JavaScript 文件上传

文件上传

同样的, 文件上传的操作方法, 跟 DOM 和 JavaScript 表单 介绍的方法, 是一样的.

<form action="?" onsubmit='return f()' method="post" enctype="multipart/form-data">
 <input type="file">
</form>

<script type="text/javascript">
function f() {
var file = document.querySelector('input[type=file]')
var filename = file.value // 文件路径

if (!filename && !(filename.endsWith('.jpg'))) { // 验证文件
 // ...
 return false
}
</script>

File API

在新版 HTML5 的标准中, 针对表单的文件上传, 浏览器提供了 File 和 FileReader 两个对象, 让我们可以获得到文件信息和读取文件.

<form action="?" method="post" enctype="multipart/form-data">
 <input type="file" onchange="return file()"> <!-- 当用户上传了的图片, 把图片设置成 body 的背景 -->
 <input type="submit">
</form>

<script type="text/javascript">
 function file() {
  var f = document.querySelector('input[type=file]')
  var body = document.querySelector('body')

  // f.files[0] 图片信息 name,type,size ...
  // FileReader 载入图像
  reader = new FileReader()

  //回调 readAsDataURL
  reader.onload = function(e) { 
   body.style.backgroundImage = 'url(' + e.target.result + ')'
  }

  reader.readAsDataURL(f.files[0])
 }
</script>

通过 FIle API设置完成的背景图片, 我们通过 Chrome 开发者工具 查看, 可以看见, 图片的地址其实是我们本地的图片, 转换成一组 Base64 编码 | 参考 - Base64.