javascript - 上载图像之前预览图像(Preview an image before it is uploaded)

Question

I want to be able to preview a file (image) before it is uploaded.

(我希望能够在上传文件之前预览文件（图像）。)

The preview action should be executed all in the browser without using Ajax to upload the image.

(预览操作应在浏览器中全部执行，而无需使用Ajax上载图像。)

How can I do this?

(我怎样才能做到这一点？)

  ask by Simbian translate from so

Answer 1

Please take a look at the sample code below:

(请看下面的示例代码：)

 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); }); 

 <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> 

Also, you can try this sample here .

(另外，您可以在此处尝试该示例 。)