这是一个基于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。

单层解决方案：

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

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>

对于我的应用程序，使用加密的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=“图像预览…”>

这是我的代码。支持IE[6-9]、chrome 17+、firefox、Opera 11+、Maxthon3

函数previewImage（fileObj，imgPreviewId）{var allowExtetion=“.jpg，.bmp，.gif，.png”//允许上载文件类型document.getElementById（“hfAllowPicSuffix”）.value；var extention=fileObj.value.substring（fileObj.value.lastIndexOf（“.”）+1）.toLowerCase（）；var browserVersion=window.navigator.userAgent.toUpperCase（）；如果（allowExtendition.indexOf（extention）>-1）{if（fileObj.files）{if（window.FileReader）{var reader=新文件读取器（）；reader.onload=函数（e）{document.getElementById（imgPreviewId）.setAttribute（“src”，e.target.result）；};reader.readAsDataURL（fileObj.files[0]）；}否则如果（browserVersion.indexOf（“SAFARI”）>-1）{警告（“不支持低于broswer的Safari6.0”）；}}否则如果（browserVersion.indexOf（“MSIE”）>-1）{如果（browserVersion.indexOf（“MSIE 6”）>-1）｛//ie6document.getElementById（imgPreviewId）.setAttribute（“src”，fileObj.value）；}其他{//ie[7-9]文件对象选择（）；fileObj.blur（）；var newPreview=文档.getElementById（imgPreviewId）；newPreview.style.border=“实心1px#eeeeee”；newPreview.style.filter=“progid:DXImageTransform.Microsoft.AlphaImageLoader（sizingMethod='scale'，src='”+document.selection.createRange（）.text+“'）”；newPreview.style.display=“块”；}}否则如果（browserVersion.indexOf（“FIREFOX”）>-1）{//FIREFOXvar firefoxVersion=parseFloat（browserVersion.toLowerCase（）.match（/frefox\/（[\d.]+）/）[1]）；如果（firefoxVersion<7）｛//firefox7以下document.getElementById（imgPreviewId）.setAttribute（“src”，fileObj.files[0].getAsDataURL（））；}其他｛//firefox7.0+document.getElementById（imgPreviewId）.setAttribute（“src”，window.URL.createObjectURL（fileObj.files[0]））；}}其他{document.getElementById（imgPreviewId）.setAttribute（“src”，fileObj.value）；}}其他{警报（“仅支持”+allowExtension+“后缀”）；fileObj.value=“”//清除选定文件如果（browserVersion.indexOf（“MSIE”）>-1）{文件对象选择（）；document.selection.clear（）；}}}函数更改文件（elem）{//文件对象，预览img标记id预览图像（elem，'imagePreview'）}<input-type=“file”id=“netBarBig”onchange=“changeFile（this）”/><img src=“”id=“imagePreview”style=“width:120px；height:80px；”alt=“”/>

这里有一种在上传前使用纯javascript预览图像的简单方法；

//profile_change is the id of the input field where we choose an image
document.getElementById("profile_change").addEventListener("change", function() {

//Here we select the first file among the selected files.
const file = this.files[0];

/*here i used a label for the input field which is an image and this image will 
  represent the photo selected and profile_label is the id of this label */
const profile_label = document.getElementById("profile_label");

//Here we check if a file is selected
if(file) {
    //Here we bring in the FileReader which reads the file info. 
    const reader = new FileReader();
    
    /*After reader loads we change the src attribute of the label to the url of the 
    new image selected*/
    reader.addEventListener("load", function() {
        dp_label.setAttribute("src", this.result);
    })

    /*Here we are reading the file as a url i.e, we try to get the location of the 
    file to set that as the src of the label which we did above*/
    reader.readAsDataURL(file);

}else {
    //Here we simply set the src as default, whatever you want if no file is selected.
    dp_label.setAttribute("src", "as_you_want")
}
});

这里是HTML；

<label for="profile_change">
            <img title="Change Profile Photo" id="profile_label" 
             src="as_you_want" alt="DP" style="height: 150px; width: 150px; 
               border-radius: 50%;" >
</label>
<input style="display: none;" id="profile_change" name="DP" type="file" class="detail form-control">