纵有疾风起
人生不言弃

微擎app端上传图片后删除不了图片

相信在微擎开发的哥们都知道, 微擎在手册方面还是有点坑的,根本不让人活啊.没办法, 开发时, 只能自己看着源码来搞>>>>

好, 不多说了. 现在来看一个坑  ..直接上代码\

html:

<!--自己的头部引入-->
{template 'common_header'}
<script type="text/javascript" src="{$_W['siteroot']}app/resource/js/app/util.js"></script><script src="{$_W['siteroot']}app/resource/js/require.js"></script><script type="text/javascript" src="{$_W['siteroot']}app/resource/js/lib/mui.min.js"></script><link href="{$_W['siteroot']}app/resource/css/common.min.css" rel="stylesheet"><script type="text/javascript" src="{$_W['siteroot']}app/resource/js/app/common.js"></script><form action="" method="post"> <ul class="report-list white clearfix"> <li class="clearfix"> <div class="pull-left"> 标题 </div> <div class="pull-right"> <input type="text" placeholder="请输入标题" name="report_title" value=""> </div> </li> <li class="clearfix"> <div class="pull-left"> 填写人 </div> <div class="pull-right"> <input type="text" placeholder="请输入填写人" name="report_author" value=""> </div> </li> </ul>
<div class="apply-advantage white report-load">            <div class="title">报告内容</div>            <textarea name="textarea" id="textarea" rows="6" placeholder="至少100字" minlength="115" style="color: #333;"></textarea>            <div class="photo">                <div class="mui-table-view-chevron">                    <div class="mui-image-uploader ">                        <a href="javascript:;" class="mui-upload-btn mui-pull-left js-image-report_picture"></a>                        <div class="mui-image-preview js-image-preview mui-pull-left" ></div>                    </div>                </div>            </div>        </div>

 



<button type="button" class="submit-report">提交</button>
    <input type="hidden" name="token" value="{$_W['token']}" /></form><script type="text/javascript">    $(function(){        mui.init({            swipeBack: true //启用右滑关闭功能        });        //上传图片        util.image($('.js-image-report_picture'), function(url){            $('.js-image-report_picture').parent().find('.js-image-preview').append('<input type="hidden" value="'+url.attachment+'" name="report_picture[]" /><img src="'+url.url+'" data-id="'+url.id+'" data-preview-src="" data-preview-group="__IMG_UPLOAD_report_picture" />');        }, {            crop : false,//裁剪            multiple : true,//多图            preview : '__IMG_UPLOAD_{$name}'//预览        });    });</script>{template 'common_footer'}

页面图: 

微擎app端上传图片后删除不了图片插图

上传后再点击删除图片, 使出你的洪荒之力后也是徒然无功:

微擎app端上传图片后删除不了图片插图1

 

 后来看了源码后, 他这个是用mui封装了 webuploader过来的. 最直接简单粗暴的方法就是自己重新在页面写个删除的操作方法:

//删除图片        $(document).on("click", ".mui-clearfix .js-submit", function (a) {            var b = $(document).find(".mui-slider-group .mui-active").index();            $(".mui-image-preview input").eq(b).remove();            $(".mui-image-preview img").eq(b).remove();            var i = mui.previewImage({footer: util.templates["image.preview.html"]});            i.close();        });

这样就可以实现了:::

微擎app端上传图片后删除不了图片插图2

微擎app端上传图片后删除不了图片插图3

微擎app端上传图片后删除不了图片插图4

 

 最后附上十一届三中全会的准备思想:  实践是检验真理的唯一标准

注: 转载请标明出处!

 

文章转载于:https://www.cnblogs.com/wherein/p/7204870.html

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 微擎app端上传图片后删除不了图片
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录