在现代浏览器中,通过 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上传图片.png

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

readfile上传头像1.png

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

桌面(PC):

FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support3.6 (1.9.2)[1]7(Yes)10[2]12.02[3]6.0
Support in Web Workers46 (46)(Yes)(Yes)No support(Yes)No support


mobile:

FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support323(Yes)1011.56.1
Support in Web Workers46 (46)(Yes)(Yes)No support(Yes)No support

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