好资源导航 » 文章资讯 » 使用iView Upload 组件实现手动上传图片的示例代码

使用iView Upload 组件实现手动上传图片的示例代码

2023-09-07 19:49:04 61

在过去，浏览器是不允许我们读取本地的文件，包括图片。因此，当我们需要预览一个图片的时候，往往先将它传送到服务端，然后服务端返回一个访问url地址，达到预览图片的功能。如今，随着标准不断的改善，JavaScript里的API越来越多，我们可以通过直接读取本地文件的方式来加载我们想要看到的文本或者图片，一定程度上减少了服务端的压力。

Upload组件参考文档：https://www.iviewui.com/components/upload

文档提供的参考代码：

![]('https://o5wwk8baw.qnssl.com/'+imgName+'/large')

自己实现手动上传：




.demo-upload-list{
display:inline-block;
width:60px;
height:60px;
text-align:center;
line-height:60px;
border:1pxsolidtransparent;
border-radius:4px;
overflow:hidden;
background:#fff;
position:relative;
box-shadow:01px1pxrgba(0,0,0,.2);
margin-right:4px;
}

.demo-upload-listimg{
width:100%;
height:100%;
}

.demo-upload-list-cover{
display:none;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.6);
}

.demo-upload-list:hover.demo-upload-list-cover{
display:block;
}

.demo-upload-list-coveri{
color:#fff;
font-size:20px;
cursor:pointer;
margin:02px;
}

.ivu-icon{
line-height:58px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

使用iView Upload 组件实现手动上传图片的示例代码

热门推荐

随机推荐