weui 上傳

html部分

{template 'common_header'}
<!-- 已領取任務 提交 -->
{if $now_do == 'my_task'} 
<style>
.page_title {
    font-size: 1.4rem;
    color: #F96A0E;
}
.weui_media_box .weui_media_title {
    color: #F96A0E;
}

.page_top_item {
    text-align: center;
}
.page_top_item span{
    width: 20%;
    line-height: 25px;
    border-radius: 3px;
    border: 1px solid #ff5f27;
    margin-top: 7px;
    text-align: center;
    color: #ff5f27;    
    display: inline-block;    
}
.font_activity {
    background: #ff5f27!important;
    color: #fff!important;
}
/*0103 增長提交按鈕樣式*/
.weui_media_box .weui_media_desc.gao{
    height: 25px;
    line-height: 25px;
}
.mybtn{
    padding: 3px;
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
/*0103 增長提交按鈕樣式*/
</style>
    <div class="page_top_item">
        <a href="{php echo $this->createmobileUrl('my_task', array('show' => 'all'));}"><span {if !$_GPC['show'] || $_GPC['show']=='all'}class="font_activity"{/if}>所有</span></a>
        <a href="{php echo $this->createmobileUrl('my_task', array('show' => 'nofinish'));}"><span {if $_GPC['show']=='nofinish'}class="font_activity"{/if}>未完成</span></a>
        <a href="{php echo $this->createmobileUrl('my_task', array('show' => 'finish'));}"><span {if $_GPC['show']=='finish'}class="font_activity"{/if}>已完成</span></a>
    </div>
    
    <div class="weui_panel">
        <div class="weui_panel_bd">
        
            {loop $list $row}            
                <div class="weui_media_box weui_media_text" style=" margin-bottom:-30px">
                    <h4 class="weui_media_title"><a style="color:#F96A0E" href="{php echo $this->createmobileUrl('task_detail',array('tid'=>$row['taskid']));}">{$row['task_name']}</a></h4>
                </div>  
                <div class="weui_panel_bd">
                    <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
                        <div class="weui_media_hd">
                            <img class="weui_media_appmsg_thumb" style="width:60px; height:60px" src="{php echo $_W['attachurl'] . $row['task_logo']}" alt="{$row['name']}">
                        </div>
                        <div class="weui_media_bd">
                            <p class="weui_media_desc gao">提交狀態：{$row['status_zh']}  <!--0103 增長 gao 的類名-->
                            <?php //todo
                            /*  0103 增長提交按鈕樣式
                            if ($row['check_res'] != 'S') {
                                echo '<span style="color:#F63" onclick="location.href=\''.$this->createMobileUrl('my_task', array('utid' => $row['id'])).'\';">查看或提交</span>';
                            } else if($row['task_submit'] != 'Y') {
                                echo '<span style="color:#F63" onclick="location.href=\''.$this->createMobileUrl('my_task', array('utid' => $row['id'])).'\';">立刻提交</span>';
                            } 
                            */
                             if ($row['check_res'] != 'S') {
                                echo '<span class="mybtn" onclick="location.href=\''.$this->createMobileUrl('my_task', array('utid' => $row['id'])).'\';">查看或提交</span>';
                            } else if($row['task_submit'] != 'Y') {
                                echo '<span class="mybtn" onclick="location.href=\''.$this->createMobileUrl('my_task', array('utid' => $row['id'])).'\';">立刻提交</span>';
                            } 
                            
                            ?>
                            </p>
                            <p class="weui_media_desc">獎勵說明：{$row['award_type_name']}</p>
                            <p class="weui_media_desc">
                            入帳信息：<?php 
                            if ($row['check_res']=='S') {
                                echo '已入帳';
                            } else if ($row['check_res']=='R') {
                                echo '審覈中';
                            } else if ($row['check_res']=='F') {
                                echo '不合格，'.$row['fail_msg'];
                            } else {
                                echo '無';
                            }
                            ?>
                            </p>
                            <p class="weui_media_desc">領取時間：{$row['createtime']}</p>
                        </div>  
                    </a>                 
                </div>                            
            {/loop}

            {if empty($list)}
                <div class="weui_media_box weui_media_text">
                    <h4 class="weui_media_title">暫無記錄</h4>
                </div>       
            {/if}        
            
            
        </div>
     </div> 

{else}
<style>
.page_title {
    font-size: 1.4rem;
    color: #F96A0E;
}
.weui_media_box .weui_media_title {
    color: #F96A0E;
}
.weui_btn_primary2 {
    background-color: #E85C06;
}
.page_title {
    font-size: 1.4rem;
    color: #E85C06;
}
.page_title {
    text-align: center;
    font-size: 34px;
    color: #E85C06;
    font-weight: 400;
    margin: 0 15%;
}
.help-block img {
    width: 90%;
}
/*0104 底部按鈕*/
.weui_tabbar p{
    margin-bottom: 0;
}
/*0104 底部按鈕*/
</style>
    <div class="hd" style="padding:0; padding-top:3px">
        <h1 class="page_title" style="font-size:2.4rem">{$curr_title}</h1>
    </div>
    
    <div class="weui_panel">
        <div class="weui_panel_bd">
                <div class="weui_media_box weui_media_text">
                    <h4 class="weui_media_title"><a style="color:#F96A0E" href="{php echo $this->createmobileUrl('task_detail',array('tid'=>$row['taskid']));}">{$row['task_name']}</a></h4>
                    <p class="weui_media_desc" style="display:block">
                            任務說明：{$row['title_info']}<br>
                            有效時間：{$row['begindate']} - {$row['enddate']}<br>
                            獎勵說明：{$row['award_type_name']}<br>
                            入帳信息：<?php 
                            if ($row['check_res']=='S') {
                                echo '已入帳';
                            } else if ($row['check_res']=='R') {
                                echo '審覈中';
                            } else if ($row['check_res']=='F') {
                                echo '不合格，'.$row['fail_msg'];
                            } else {
                                echo '無';
                            }
                            ?><br>    
                            <?php if ($row['task_submit']=='Y') {?>
                            已提交圖片：
                            {if $row['user_pic']}
                                <img src="{$row['user_pic']}" width="80%">
                            {/if}   
                            <br />                         
                            已提交文本：{$row['user_text']}<br>
                            <?php }?>                        
                    </p>
                    <ul class="weui_media_info">
                        <li class="weui_media_info_meta">領取時間：{$row['createtime']}</li>
                    </ul>
                </div>            

        {if $row['task_submit'] != 'Y' || $row['check_res'] == 'F'}
        {template 'common/header'}
        <form action="{php echo $this->createmobileUrl('post_task',array('tid'=>$row['taskid']));}" method="post" name="utask_submit" enctype="multipart/form-data">
        <input type="hidden" name="op" value="utask_submit">
        <input type="hidden" name="tid" value="{$tid}">  
        <input type="hidden" name="utid" value="{$utid}">  
        <input type="hidden" name="token" value="{$_W['token']}" />

                <div class="weui_media_box weui_media_text">
                    <h4 class="weui_media_title">任務提交</h4>
                    <p class="weui_media_desc" style="display:block">   
                    圖片：{php //echo tpl_form_field_image('user_pic',$row['user_pic']);}
                    {if $row['user_pic']}
                        <img src="{$row['user_pic']}" width="80%">
                    {/if}
                  <div class="weui_uploader">
                        <div class="weui_uploader_bd">
                          <ul class="weui_uploader_files"><!-- 預覽圖插入到這 --> </ul>
                          <div class="weui_uploader_input_wrp"><input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" ></div>
                        </div>
                  </div>                     
                    
                    <br />
                    文本：<textarea cols="40" rows="4" id="user_text" name="user_text">{$row['user_text']}</textarea>
                    
                    </p>

                </div> 
                
            <!--0104 底部按鈕-->
            <div class="weui_opr_area">
                <p class="weui_btn_area">
                    <a href="javascript:;" onClick="form_submit()" class="weui_btn weui_btn_primary2">提交任務</a>
                </p>
            </div> 
            <!--0104 底部按鈕-->
            
        </div>
        <!--<div style="">     0104底部按鈕           -->
        <!--    <div class="weui_opr_area">-->
        <!--        <p class="weui_btn_area">-->
        <!--            <a href="javascript:;" onClick="form_submit()" class="weui_btn weui_btn_primary2">提交任務</a>-->
        <!--        </p>-->
        <!--    </div>                             -->
        <!--</div>        -->
            <script>
            function form_submit() {
                if ($('#user_pic').val() == '' || $('#user_text').val() == '') {
                    alert('請選擇要上傳的圖片或文本');
                    return false;
                }
                document.utask_submit.submit()
            }
            </script>                        
        </form>
                <script>var widgets_ajax_pic_host = "{php echo $this->createMobileUrl('AjaxUploadPic');}";</script> 
                <!-- 0108 增長任務id-->
                <script>var renwuid = "{php echo $row['taskid']+0}";</script> 
                <!--增長任務id-->
                
                <script src="{CURR_UI_DIR}jq/q_3354988381_ajax_pic.js"></script>          
        {/if}             
        </div>
                


                    
{/if}  
{if $row['check_res'] == 'F'}   
{else}
{template 'common_footer'}
{/if}

js部分

$.weui = {};
$.weui.alert = function(options) {
    options = $.extend({
        title: '警告',
        text: '警告內容'
    }, options);
    var $alert = $('.weui_dialog_alert');
    $alert.find('.weui_dialog_title').text(options.title);
    $alert.find('.weui_dialog_bd').text(options.text);
    $alert.on('touchend click', '.weui_btn_dialog', function() {
        $alert.hide()
    });
    $alert.show()
};
$(function() {
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    var maxSize = 1024 * 1024;
    var maxWidth = 300;
    var maxCount = 1;
    $('.js_file').on('change', function(event) {
        var files = event.target.files;
        if (files.length === 0) {
            return
        }
        for (var i = 0, len = files.length; i < len; i++) {
            var file = files[i];
            var reader = new FileReader();
            if (allowTypes.indexOf(file.type) === -1) {
                $.weui.alert({
                    text: '該類型不容許上傳'
                });
                continue
            }
            if (file.size > maxSize) {
                $.weui.alert({
                    text: '圖片太大，不容許上傳'
                });
                continue
            }
            if ($('.weui_uploader_file').length >= maxCount) {
                $.weui.alert({
                    text: '最多隻能上傳' + maxCount + '張圖片'
                });
                return
            }
            reader.onload = function(e) {
                $.post(widgets_ajax_pic_host, {
                    img: e.target.result,
                    renwuid:renwuid //0108 增長任務id
                }, function(ret) {
                    if (ret.img != '') {
                        $('.weui_uploader_input_wrp').hide()
                    } else {
                        alert('upload fail');
                        return
                    }
                }, 'json');
                var img = new Image();
                img.onload = function() {
                    var w = Math.min(maxWidth, img.width);
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(img, 0, 0, w, h);
                    var base64 = canvas.toDataURL('image/png');
                    var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div><input type="hidden" value="1" id="ajax_pic_flag" name="ajax_pic_flag"></li>');
                    $('.weui_uploader_files').append($preview);
                    var num = $('.weui_uploader_file').length;
                    $('.js_counter').text(num + '/' + maxCount);
                    var progress = 0;

                    function uploading() {
                        $preview.find('.weui_uploader_status_content').text(++progress + '%');
                        if (progress < 100) {
                            setTimeout(uploading, 30)
                        } else {
                            $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove()
                        }
                    }
                    setTimeout(uploading, 30)
                };
                img.src = e.target.result
            };
            reader.readAsDataURL(file)
        }
    })
});

 

php部分

public function doMobileAjaxUploadPic()
    {
        global $_W, $_GPC;
        //0108 增長任務id
        $renwuid = $_GPC['renwuid']+0;;
        $img = isset($_POST['img']) ? $_POST['img'] : '';
        list($type, $data) = explode(',', $img);
        if (strstr($type, 'image/jpeg') !== '') {
            $ext = '.jpg';
        } elseif (strstr($type, 'image/gif') !== '') {
            $ext = '.gif';
        } elseif (strstr($type, 'image/png') !== '') {
            $ext = '.png';
        }
        //$photo = 'images/wei_task_business_ll_' . time() . $ext;
        //0108 上傳遠程附件 修改文件名
        $mulu = 'images/task/'.date('Y',time()).'/'.date('m',time()).'/' .$renwuid.'/';

        if(!file_exists(ATTACHMENT_ROOT .$mulu)){
            mkdir(ATTACHMENT_ROOT .$mulu,'0777',1);
        }
        $photo_name = $mulu.time() .random(32). $ext;
        //$_SESSION['session_ajax_pic'] = $photo;
        //0108 上傳遠程附件 修改文件名
        $_SESSION['session_ajax_pic'] = $photo_name;
        $tmp_dir_arr = explode('addons', dirname(__FILE__));
        //$photo = $tmp_dir_arr[0] . '/attachment/' . $photo;
        //0108 上傳遠程附件 修改文件名
        $photo = ATTACHMENT_ROOT . $photo_name;

        file_put_contents($photo, base64_decode($data), true);

        //0108 上傳遠程附件
        $photo = ATTACHMENT_ROOT . $photo_name;
        file_put_contents($photo, base64_decode($data), true);
        
        /*0108 上傳遠程附件*/
        setting_load('remote');
        if (!empty($_W['setting']['remote']['type'])) {
            load()->func('file');
            $remotestatus = file_remote_upload($photo_name);
            if (is_error($remotestatus)) {
                $result['message'] = '遠程附件上傳失敗，請檢查配置並從新上傳';
                die(json_encode($result));
            } else {
                $info['url'] = tomedia($photo_name);
            }
        }
        /*0108 上傳遠程附件*/
        header('content-type:application/json;charset=utf-8');
        //$ret = array('img' => $photo);
        //0108 修改文件名 
        $ret = array('img' => $photo_name);
        echo json_encode($ret);
    }