View UI(iView) Upload 自定义多图上传列表提交

iView Upload 自定义多图上传列表提交

可以自由控制上传列表,完成各种业务逻辑,示例是一个照片墙,可以查看大图和删除。

  • 设置属性 show-upload-list 为 false,可以不显示默认的上传列表。
  • 设置属性 default-file-list 设置默认已上传的列表。
  • 通过 on-success 等属性来控制完整的上传过程,详见API。另外,可以通过丰富的配置,来定制上传需求,本例中包含了:

  • 文件必须是 jpg 或 png 格式的图片。

  • 最多上传5张图片。
  • 每个文件大小不超过 2M。
  •  

        

图片上传后CSS样式列表

.upload-list img 
    {width:100%;height:100%;}

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

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

.upload-list-cover i {
color:#fff;
font-size:20px;
cursor:pointer;
margin:0 2px;
}

上传操作并更新上传图片列表



后台保存提交上传图片的列表

imgUrl: JSON.stringify(this.uploadList),

PHP后台接收保存到数据库

$_imgUrl =json_decode(input('post.imgUrl'),true);

if (is_array($_imgUrl)) {
     for ($i=0; $i < count($_imgUrl); $i++) {
         $imgUrl .= $_imgUrl[$i]['url'].",";     
        }
}
$imgUrl=substr($imgUrl,0,strlen($imgUrl)-1);

重新编辑时加载upload图片获取显示列表

imgUrl = itemInfo.img_url.split(",");
for(var i = 0; i < imgUrl.length; i++) {
    _this.uploadList.push({
      name:'',
      url:imgUrl[i],
      showProgress: false,
      status: "finished"
    });}

你可能感兴趣的:(view,design)