JavaScript图片上传前先预览

前端技术

以前听说因为js的安全机制，禁止代码获得文件的路径，以为不能实现先上传再预览，今天找了找，有相关的示例。

以下内容参考自stackoverflow

1.利用FileReader对象MDN文档
注: IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#imgInp").change(function(){
    readURL(this);
});

2.利用URL.createObjectURL()

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>