我希望能够在上传文件（图像）之前预览它。预览操作应该在浏览器中全部执行，而不使用Ajax上传图像。
我该怎么做？
当前回答
<img id="blah" alt="your image" width="100" height="100" />
<input type="file" name="photo" id="fileinput" />
<script>
$('#fileinput').change(function() {
var url = window.URL.createObjectURL(this.files[0]);
$('#blah').attr('src',url);
});
</script>
其他回答
单层解决方案：
下面的代码使用对象URL，在查看大型图像时，它比数据URL更有效（数据URL是包含所有文件数据的巨大字符串，而对象URL只是引用内存中文件数据的短字符串）：
<img id=“blah”alt=“your image”width=“100”height=“100”/><输入类型=“文件”onchange=“document.getElementById（'blah'）.src=window.URL.createObjectURL（this.files[0]）”>
生成的URL如下：
blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
使用JavaScript（jQuery）和HTML5的多个图像示例
JavaScript（jQuery）
function readURL(input) {
for(var i =0; i< input.files.length; i++){
if (input.files[i]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $('<img id="dynamic">');
img.attr('src', e.target.result);
img.appendTo('#form1');
}
reader.readAsDataURL(input.files[i]);
}
}
}
$("#imgUpload").change(function(){
readURL(this);
});
}
标记（HTML）
<form id="form1" runat="server">
<input type="file" id="imgUpload" multiple/>
</form>
试试这个
在将图像从浏览器上传到服务器之前预览图像，而不使用Ajax或任何复杂的功能。
它需要一个“onChange”事件来加载图像。
函数预览（）{frame.src=URL.createObjectURL（event.target.files[0]）；}<表单><input-type=“file”onchange=“preview（）”><img id=“frame”src=“”width=“100px”height=“100px“/></form>
要预览多个图像，请单击此处
短双衬套
这是cmlevy答案的大小改进-尝试
<input-type=file oninput=“pic.src=window.URL.createObjectURL（this.files[0]）”><img id=“pic”/>
imgInp.oncange=evt=>{const[file]=imgInp.fileif（文件）{blah.src=URL.createObjectURL（文件）}}<form runat=“server”><input accept=“image/*”type='file'id=“imgInp”/><img id=“blah”src=“#”alt=“your image”/></form>
