我希望能够在上传文件（图像）之前预览它。预览操作应该在浏览器中全部执行，而不使用Ajax上传图像。
我该怎么做？
当前回答
使用jquery预览多个文件
$（文档）.ready（函数）{$（'#image'）.change（function（）{$（“#frames”）.html（“”）；对于（var i=0；i<$（this）[0].files.length；i++）{$（“#frames”）.append（'<img src=“'+window.URL.createObjectURL（this.files[i]）+'”width=“100px”height=“100px“/>'）；}});});<head><script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script></head><body><input-type=“file”id=“image”name=“image[]”多个/><br/><div id=“frames”></div></body>
其他回答
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>
LeassTaTT的答案在FF和Chrome等“标准”浏览器中运行良好。IE的解决方案存在，但看起来有所不同。此处描述了跨浏览器解决方案：
在HTML中，我们需要两个预览元素，img用于标准浏览器，div用于IE
HTML格式：
<img id="preview"
src=""
alt=""
style="display:none; max-width: 160px; max-height: 120px; border: none;"/>
<div id="preview_ie"></div>
在CSS中，我们指定了以下特定于IE的内容：
CSS:
#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
在HTML中，我们包括标准和特定于IE的Javascript：
<script type="text/javascript">
{% include "pic_preview.js" %}
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
{% include "pic_preview_ie.js" %}
</script>
pic_preview.js是LeassTaTT答案中的Javascript。将$（“#blah”）替换为$（“#预览”），并添加$（“＃预览”）.show（）
现在，特定于IE的Javascript（pic_preview_IE.js）：
function readURL (imgFile) {
var newPreview = document.getElementById('preview_ie');
newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
newPreview.style.width = '160px';
newPreview.style.height = '120px';
}
就是这样。适用于IE7、IE8、FF和Chrome。请在IE9中测试并报告。IE预览的想法可以在这里找到：http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969（v=vs.85）.aspx
我编辑了@Ivan的答案，以显示“无预览可用”图像，如果它不是图像：
function readURL(input) {
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
var reader = new FileReader();
reader.onload = function (e) {
$('.imagepreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}else{
$('.imagepreview').attr('src', '/assets/no_preview.png');
}
}
在React中，如果文件在你的props中，你可以使用：
{props.value instanceof File && (
<img src={URL.createObjectURL(props.value)}/>
)}
使用jquery预览多个文件
$（文档）.ready（函数）{$（'#image'）.change（function（）{$（“#frames”）.html（“”）；对于（var i=0；i<$（this）[0].files.length；i++）{$（“#frames”）.append（'<img src=“'+window.URL.createObjectURL（this.files[i]）+'”width=“100px”height=“100px“/>'）；}});});<head><script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script></head><body><input-type=“file”id=“image”name=“image[]”多个/><br/><div id=“frames”></div></body>
