在上传之前预览图像
我希望能够在上传之前预览文件（图像）。 预览操作应该全部在浏览器中执行，而不使用Ajax来上传图像。
我怎样才能做到这一点？
请看下面的示例代码：
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 id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>有几种方法可以做到这一点。 最有效的方法是在<input>的File中使用URL.createObjectURL（）。 将此URL传递给img.src以通知浏览器加载提供的图像。
这是一个例子：
<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>单线解决方案：
下面是一个使用blob对象URL的代码，在加载大图片时比数据URL更加高效（想象一下，在您的HTML页面中添加4M标记！）：
<img id="blah" alt="your image" width="100" height="100" />
<input type="file"
onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">