JavaScript上载图像之前预览图像

Question

我希望能够在上传文件之前预览文件（图像）。预览操作应在浏览器中全部执行，而无需使用Ajax上载图像。

我怎样才能做到这一点？

Answer 1

请看下面的示例代码：

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]); // convert to base64 string

  }

}



$("#imgInp").change(function() {

  readURL(this);

});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form runat="server">

  <input type='file' id="imgInp" />

  <img id="blah" src="#" alt="your image" />

</form>