『如何让图片前端显示』前端图片不显示

原始链接：

作家：吕小胖

一般文件上载只能查看文件名，如果想选择图片，可以使用HTML5的FileReader完成。

实施步骤如下：

Html:

这里有上传照片的内容。nchange='getFile()'是选择文件后的转换函数，以后会提到

上传照片的按钮是我在定制这里。在另一个博客上。

Css:

预览框暂定为100×100的方形框，如果出现，图片将变形等，可以进行自定义

以下是主要的JS部分

JS:

首先，定义变量showFile，以存储要实际显示的图片的整个文件，并导入预览框，以便以后轻松显示。

准备工作结束了，现在换代码写一个函数，开始编码图片路径。

这样就可以得到转换后的图片文件的src。

(注意：FileReader在IE中不兼容。IE 6-9不完全兼容。IE 10-11需要写兼容性。)以下是转换。

导入此处选择的文件后，请将其指定给全局文件(如果单击了选择框，但未选择文件，则为以前的文件本身)，然后回调函数将src指定给预览框。

这个阶段的完成时间是在文件框的onchange中完成后，效果完成了。看看结果吧。

选择之前：

因为我没有给IMG SRC，所以是空的。

选择后：

选择图片可以预览，就像选择图片一样，可以简洁地预览样式，也可以自己定义。比如写文章。

这样：

样式是自己定义的。

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。