试试这个

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

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

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

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

试试这个

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

以下是工作代码。

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Java脚本：

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

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

单层解决方案：

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

我已经制作了一个插件，由于互联网，它可以在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>