使用js实现图片上传预览和验证格式

使用js实现图片上传预览和验证格式

最近一直在做web页面的上传功能，也是第一次接触到上传这一块，也没有啥经验，还好我们有一个强大的网络，通过各种途径，最终还是学会了做一个简单的js图片验证上传和预览的功能，具体步骤如下：

1、验证file所选择的文件的类型

我们都知道在使用input标签的type=file属性时，可以直接访问本地磁盘从而选择需要上传的文件，但是他的访问类型是没有限制的，因此我们需要给它做一下简单的过滤，避免上传的东西对系统造成危害以及对系统资源浪费。
通过查看该标签的属性我们不难看出，在使用file时有几个属性我们不得不知道一下，
1）file.type type ->也就是我们所选择的文件类型，一般包括文件类型和扩展名：比如照片（123.jpg） type: image/jpeg
2）file.name name->也就是我们所选择的文件名:123.jpg
了解一下上面两个属性就已经足够我们实现js图片上传验证以及预览了，其他有需要了解的自己去查找资料

2、想法实现流程图

3、js代码

<input type="file" onchange="preview(this)" name="image"/>
<div class="preview" id="preview"></div>
<script type="text/javascript">