这里有一种在上传前使用纯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">

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

对于我的应用程序，使用加密的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 7+中生成预览效果，但几乎没有限制。我把它放进github页面，这样更容易获取

$（函数（）{$（“input[name=file1]”）.previewimage({div:“.preview”，imgwidth:180，高度：120});$（“input[name=file2]”）.previewimage({div:“.preview 2”，imgwidth:90，高度：90});});.preview>div{显示：内联块；文本对齐：居中；}.preview2>div{显示：内联块；文本对齐：居中；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><script src=“https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js“></script>预览<div class=“preview”></div>预览2<div class=“preview2”></div><form action=“#”method=“POST”enctype=“multipart/form data”><input-type=“file”name=“file1”><input-type=“file”name=“file2”><input-type=“submit”></form>

干净简单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>

试试这个

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”>