请看下面的示例代码：
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 runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>另外，您可以在此处尝试该示例 。
您可以通过几种方法来执行此操作。最有效的方法是在 中的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>您还可以使用FileReader.readAsDataURL（）从 解析文件。这将在内存中创建一个字符串，其中包含该图像的 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-3de016824345LeassTaTT 的答案在 FF 和 Chrome 等 “标准” 浏览器中效果很好。 IE 的解决方案存在，但看起来有所不同。这里介绍跨浏览器解决方案：
在 HTML 中，我们需要两个预览元素，用于标准浏览器的 img 和用于 IE 的 div
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')和$('#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/zh-CN/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');
}
}这是基于 Ivan Baev 答案的多个文件版本。
HTML
<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>JavaScript / jQuery
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});由于 $ .parseHTML 的使用，因此需要 jQuery 1.8，这有助于缓解 XSS。
这将立即可用，您唯一需要的依赖项就是 jQuery。
是。有可能的。
HTML
<input type="file" accept="image/*" onchange="showMyImage(this)" />
<br/>
<img id="thumbnil" style="width:20%; margin-top:10px;" src="" alt="image"/>JS
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}您可以从此处获取Live Demo 。
干净简单的JSfiddle
当您希望通过 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>使用 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>如何创建一个加载文件并触发自定义事件的函数。然后将一个侦听器附加到输入。这样，我们可以灵活地使用文件，而不仅仅是预览图像。
/**
* @param {domElement} input - The input element
* @param {string} typeData - The type of data to be return in the event object.
*/
function loadFileFromInput(input,typeData) {
var reader,
fileLoadedEvent,
files = input.files;
if (files && files[0]) {
reader = new FileReader();
reader.onload = function (e) {
fileLoadedEvent = new CustomEvent('fileLoaded',{
detail:{
data:reader.result,
file:files[0]
},
bubbles:true,
cancelable:true
});
input.dispatchEvent(fileLoadedEvent);
}
switch(typeData) {
case 'arraybuffer':
reader.readAsArrayBuffer(files[0]);
break;
case 'dataurl':
reader.readAsDataURL(files[0]);
break;
case 'binarystring':
reader.readAsBinaryString(files[0]);
break;
case 'text':
reader.readAsText(files[0]);
break;
}
}
}
function fileHandler (e) {
var data = e.detail.data,
fileInfo = e.detail.file;
img.src = data;
}
var input = document.getElementById('inputId'),
img = document.getElementById('imgId');
input.onchange = function (e) {
loadFileFromInput(e.target,'dataurl');
};
input.addEventListener('fileLoaded',fileHandler)我的代码可能不如某些用户好，但我想您会明白的。在这里你可以看到一个例子