如何用 Visual Studio上传图片至网页

本文介绍了如何在Visual Studio中实现图片上传至网页的功能。首先,强调了数据库中存储图片路径而非二进制数据的原因,以避免性能影响。接着,通过创建HTML元素和双击事件,展示如何在页面上设置图片容器并触发文件选择对话框。利用FileReader读取选定图片,将其转化为Base64编码,并加载到页面中显示。最后,添加了文件类型的验证,确保上传的文件符合预期格式。
摘要由CSDN通过智能技术生成

首先,要确保自己引进的数据库中有picture这一列名。你也可以自己命名这一列名,不过picture英译就是图片的意思,这样命名比较容易理解。数据类型最好不要用二进制类型,因为一般不会把图片直接插入到数据库中,而是把这个图片保存到磁盘里面,然后把这个图片的名称或者路径放到数据库中。图片、视频占的体积比较大,如果直接放图片或者视频进数据库的话,数据库体积就会变得庞大导致索引速度下降。这样会严重影响到程序的运行性能。所以不建议直接放图片进数据库,而是把文件先保存到磁盘中,然后把文件名称(路径)保存到数据库
在这里插入图片描述

接下来进入正题,先在vs中把这个图片的容器写好,如下图所示这样子,我给这个最外面的标签命名了一个标签。在这里面,有角色以及头像。有了“头像”肯定得需要图片来显示头像。所以在这下面写了img标签 src为空就行了id命名为一个userPicture,οndblclick=”showImageSelectDialog()”为双击事件。样式这里,max-width、height为最大宽度、高度。min-width、height为最小宽度、最小高度。border一个像素直径的灰色实线框。
在这里插入图片描述
在这里插入图片描述

accept在这里的意思是指文件筛选

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值