有几种方法可以做到这一点。最有效的方法是在＜input＞的文件上使用URL.createObjectURL（）。将此URL传递给img.src，告诉浏览器加载提供的图像。

下面是一个示例：

<input-type=“file”accept=“image/*”onchange=“loadFile（event）”><img id=“output”/><脚本>var loadFile=函数（事件）{var output=document.getElementById（'output'）；output.src=URL.createObjectURL（event.target.files[0]）；output.onload=函数（）{URL.revokeObjectURL（output.src）//释放内存}};</script>

您还可以使用FileReader.readAsDataURL（）从＜input＞解析文件。这将在内存中创建一个字符串，其中包含图像的base64表示。

<input-type=“file”accept=“image/*”onchange=“loadFile（event）”><img id=“output”/><脚本>var loadFile=函数（事件）{var reader=新文件读取器（）；reader.onload=函数（）{var output=document.getElementById（'output'）；output.src=读取结果；};reader.readAsDataURL（event.target.files[0]）；};</script>

试试这个

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

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

函数预览（）{frame.src=URL.createObjectURL（event.target.files[0]）；}<表单><input-type=“file”onchange=“preview（）”><img id=“frame”src=“”width=“100px”height=“100px“/></form>

要预览多个图像，请单击此处

使用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>

我编辑了@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');
    }
}

试试这个

window.onload=函数（）{if（window.File&&window.FileList&&windows.FileReader）{var filesInput=document.getElementById（“uploadImage”）；filesInput.addEventListener（“更改”，函数（事件）{var files=事件目标文件；var output=document.getElementById（“result”）；对于（var i=0；i<files.length；i++）{var file=文件[i]；if（！file.type.match（'image'））持续var picReader=新文件读取器（）；picReader.addEventListener（“加载”，函数（事件）{var picFile=事件目标；var div=document.createElement（“div”）；div.innerHTML=“<img class='umbnail'src='”+picFile.result+“'”+“title='”+picFile.name+“'/>”；output.insertBefore（div，null）；}); picReader.readAsDataURL（文件）；}});}}<input type=“file”id=“uploadImage”name=“termek_file”class=“file_input”multiple/><div id=“result”class=“uploadPreview”>

创建一个加载文件并触发自定义事件的函数怎么样。然后将侦听器附加到输入。这样，我们可以更灵活地使用文件，而不仅仅是预览图像。

/**
 * @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)

也许我的代码不如一些用户，但我想你会明白这一点的