有几种方法可以做到这一点。最有效的方法是使用URL.createObjectURL（）的文件从你的<input> 。将此 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]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>

您还可以使用FileReader.readAsDataURL()来解析 <input> 中的文件。这将在内存中创建一个包含图像的 base64 表示的字符串。

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

单线解决方案：

下面的代码使用对象 URL，它比数据 URL 更有效地查看大图像（数据 URL 是一个包含所有文件数据的巨大字符串，而对象 URL 只是一个引用文件数据的短字符串 -记忆）：

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

生成的 URL 将类似于：

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

这是最简单的方法

在不使用 Ajax 或任何复杂功能的情况下从浏览器将图像上传到服务器之前预览图像。

它需要一个“ onChange ”事件来加载图像。

function preview() {
    frame.src=URL.createObjectURL(event.target.files[0]);
}

<form>
  <input type="file" onchange="preview()">
  <img id="frame" src="" width="100px" height="100px"/>
</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')whith$('#preview')并添加$('#preview').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