文件上传 readFile api

在现代浏览器中，通过 readfile api可以很快实现upload功能：

example：

HTML:

<input type="file" onchange="previewFile()">
<img src="" height="200" alt="Image preview...">

javascript:

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }}

readFile官方提供方法中 FileReader.readAsDataURL() 可以获取到上传路径，我本地用react做了下测试:

<Input type="file" ref="faceInput" onChange={this.changeFace.bind(this)} />
<img src={this.state.faceUrl} style={{ width: 80, padding: 5 }} />

加入file变化：

changeFace() {
        const fileInputDOM = ReactDOM.findDOMNode(this.refs.faceInput);
        const reader = new FileReader();
        reader.onload = (event) => {
            let url = event.target.result; //url data
            console.log(url);
            this.setState({ faceUrl: url });
        };
        reader.readAsDataURL(fileInputDOM.files[0]);
    }

console.log可以看到获取到的url（二进制）：

这样就可以在前端很简单的实现上传：

readFile 支持的浏览器情况如下：

桌面（PC）:

mobile:

由此可见，一般的现代浏览器是可以支持的，特别在移动端没有问题，可以放心使用。