上传图片到页面

最新推荐文章于 2024-05-02 22:09:06 发布

³²⁶

最新推荐文章于 2024-05-02 22:09:06 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： .NET 文章标签：上传图片到页面

本文链接：https://blog.youkuaiyun.com/weixin_44547598/article/details/90723295

这篇博客介绍了如何使用HTML进行图片上传操作，并展示了在页面上显示上传图片的代码。通过双击时间和改变事件来实现交互，详细代码已给出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的是HTML上的代码

<div class="col-12 col-lg-3 text-center">
    <img src="" alt="" width="150" height="180" id="WGPicture" class="border border-primary" ondblclick="chooseImageFile('fileWGSmallImage');" />
    <input type="file" name="fileWGPicture" id="fileWGSmallImage" hidden accept="image/*" onchange="showImgToView('fileWGSmallImage');" />
     <p>双击选择图片</p>
</div>

具体的模样在页面上呈现的是
接下来的就是HTML中的双击时间和改变事件

通过文件获取的接口来获取选择的图片并显示出来
FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去
选择照片:用FileReader对象来读取本地数据，并且将数据结果赋值给image的src

打开file表单，选择图片
function chooseImageFile(inputFileID) {
    $("#" + inputFileID).click();
}
//创建FileReader对象
var imgReader = new FileReader();
//正则表达式 过滤图片文件
regexImageFilter = /^(?:image\/bmp