干净简单J小提琴

当您希望通过div或按钮间接触发事件时，这将非常有用。

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

短双衬套

这是cmlevy答案的大小改进-尝试

<input-type=file oninput=“pic.src=window.URL.createObjectURL（this.files[0]）”><img id=“pic”/>

单层解决方案：

下面的代码使用对象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

对于我的应用程序，使用加密的GET url参数，只有这一点有效。我总是得到一个TypeError：$（…）为空。摘自https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

函数previewFile（）{var preview=document.querySelector（'img'）；var file=document.querySelector（'input[type=file]'）.files[0]；var reader=新文件读取器（）；reader.addEventListener（“load”，函数（）{preview.src=读取结果；}，假）；if（文件）{reader.readAsDataURL（文件）；}}<input-type=“file”onchange=“previewFile（）”><br><img src=“”height=“200”alt=“图像预览…”>

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

使用纯JavaScript以可重用的方式在单个函数中预览多个文件和单个文件

函数imagePreviewFunc（即，previewerId）{let files=that.filepreviewerId.innerHTML=“”//重置图像预览元素for（假设i=0；i<files.length；i++）{let imager=document.createElement（“img”）；imager.src=URL.createObjectURL（文件[i]）；previewerId.append（成像器）；}}<input accept=“image/*”type='file'id=“imageInput_1”onchange=“imagePreviewFunc（this，imagePreview_1）”/><div id=“imagePreview_1”>此分区用于单图像预览</div><hr/><input class=“form control”accept=“image/*”type='file'id=“imageInput_2”multiple=“true”onchange=“imagePreviewFunc（this，imagePreview_2）”/><div id=“imagePreview_2”>此div用于多图像预览</div>