图片上传组件 · 全栈中心

## 图片上传组件 ![](https://box.kancloud.cn/f065861190e0c314eb24fc700f8c71f5_401x710.png) html ~~~ <body> <header class="rbk-titlebar"></header> <div class="rbk-content"> <div class="rbk-imgfile"> <img src="../../../docs/images/img101.jpg"> <img src="../../../docs/images/img102.jpg"> <img src="../../../docs/images/img11.jpg"> </div> <button class="rbk-btn">获取图片列表</button> </div> <div class="rbk-actsheet"> <ul class="rbk-table-view"> <li id="camera" class="rbk-table-view-cell">拍照</li> <li id="gallery" class="rbk-table-view-cell">访问相册</li> </ul> <ul class="rbk-table-view"> <li class="rbk-table-view-cell">取消</li> </ul> </div> </body> ~~~ js ~~~ <script> rbk.ready(function(opt) { var titlebar = rbk.getCmp('titlebar'); titlebar.title('上传图片demo'); var imgfile = rbk.getCmp('imgfile'); var actsheet = rbk.getCmp('actsheet'); var btn = rbk.getCmp('btn'); actsheet.selCallback = function(shell){ switch(shell.id()){ case "camera":rbk.platform.accessCamera(function(me){ imgfile.addImg(me.imageUrl) }) break; case "gallery":rbk.platform.accessGallery(function(me){ imgfile.addImg(me.imageUrl) }) break; } }; //设置最多图片数 imgfile.setSize(3); //点击加号方法绑定 imgfile.bindClick(function(cmp){ actsheet.switch() }) //添加图片方法 imgfile.addImg("../../../docs/images/img102.jpg"); //图片点击事件绑定 imgfile.bindItemClick(function(me){ var raw = me.raw; confirm('确认删除图片'+raw.url+'?',function(){ $(me.dom).remove(); }) }) btn.bindClick(function(){ //获取图片url列表 alert(imgfile.getVal()) }) }); </script> ~~~