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

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>

这是我的代码。支持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=“”/>

有几种方法可以做到这一点。最有效的方法是在＜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>

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

以下是工作代码。

<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]);
        }
    }