如何上传图片

Posted 2022-11-27 埋年

在网上我们经常会看到图片上传，但是图片是怎么上传的呢

上图左边的框就是用来装图片的，我们要如何双击弹出一个文本选择器，来添加我们的图片呢。

上面为它的代码，里面给了它双击事件，只要双击这个div就可以弹出选择图片

打开它呢需要把input标签的type设置为file，这个就是上传文件的类型，要上传文件必须要用file，那么接下来又要干嘛呢，接下来要选择到文件，然后判断文件是否为图片文件

根据上图我们可以发现，它是使用正则表达式来进行验证的，里面的全是一些图片的类型。具体流程是这样的，先把图片文件加载出来，再进行绑定，然后将图片显示到img元素，再选取选择到的图片，加载到image标签中，进行判断，使用上面的正则表达式进行验证，正确的话直接执行下面代码，将图片显示出来，验证错误的话，就给出判断里面的提示。