H5图片预览及上传
web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧。
一、html布局文件
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