微擎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'}

頁面圖: 

上傳后再點擊刪除圖片, 使出你的洪荒之力后也是徒然無功:

 

 后來看了源碼后, 他這個是用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();
        });

這樣就可以實現了:::

 

 最后附上十一屆三中全會的准備思想:  實踐是檢驗真理的唯一標准

注： 轉載請標明出處！