在上传图像之前预览图像

Question

在上传图像之前预览图像

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

我怎样才能做到这一点？

Answer 1

有几种方法可以做到这一点。最有效的方法是使用URL.createObjectURL（）的文件从你的<input>&nbsp;。将此URL传递给img.src，告诉浏览器加载提供的图像。这是一个例子：<input type="file" accept="image/*" onchange="loadFile(event)"><img id="output"/><script>&nbsp; var loadFile = function(event) {&nbsp; &nbsp; var output = document.getElementById('output');&nbsp; &nbsp; output.src = URL.createObjectURL(event.target.files[0]);&nbsp; };</script>您还可以使用FileReader.readAsDataURL（）来解析<input>中的文件。这将在内存中创建一个包含图像的base64表示的字符串。<input type="file" accept="image/*" onchange="loadFile(event)"><img id="output"/><script>&nbsp; var loadFile = function(event) {&nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; reader.onload = function(){&nbsp; &nbsp; &nbsp; var output = document.getElementById('output');&nbsp; &nbsp; &nbsp; output.src = reader.result;&nbsp; &nbsp; };&nbsp; &nbsp; reader.readAsDataURL(event.target.files[0]);&nbsp; };</script>