H5图片预览及上传（WEB前端）

最新推荐文章于 2024-05-08 23:39:58 发布

木神不木

最新推荐文章于 2024-05-08 23:39:58 发布

阅读量1.3w

点赞数 1

分类专栏：工作实战笔记文章标签：图片上传 H5 原生

本文链接：https://blog.csdn.net/u014155882/article/details/54890572

版权

本文详细介绍了如何在H5中实现图片的预览和上传功能，包括html布局、css样式以及TypeScript（TS）代码的实现步骤。

摘要由CSDN通过智能技术生成

H5图片预览及上传

web上传图片很简单，网上有许多的demo和js，但是本人嫌弃用那些会引入许多js包，所以还是用原生的jquery来写吧。

html有一个自己的上传文件控件---input，只需要将其type属性设置为file即可上传文件，accept=“image/”是用来限制文件类型为image，input代码如下：

 <input class="input-upload" type="file" accept="image/*"  name="pic" >

之后，我们还需要一个image标签来存放图片的预览：

<img v-bind:src="demand.image" /> //v-bind是vue.js的用法，将src的属性绑定为demand.image，可支持动态改变src的值，减少dom操作

完整的html代码：

<div id="ImageUploader" data-vpid="<%-VPID%>" data-vpcon="`{MODURL}`.js">
<div class="fil

关注