weui 上传

最新推荐文章于 2023-10-24 10:27:15 发布
最新推荐文章于 2023-10-24 10:27:15 发布
阅读量329 收藏
点赞数
文章标签： 移动开发 java php
原文链接：http://www.cnblogs.com/sbfnxk201/p/8191410.html
版权

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" οnclick="location.href=\''.$this->createMobileUrl('my_task', array('utid' => $row['id'])).'\';">查看或提交</span>';
                            } else if($row['task_submit'] != 'Y') {
                                echo '<span style="color:#F63" οnclick="location.href=\''.$this->createMobileUrl('my_task', array('utid' => $row['id'])).'\';">马上提交</span>';
                            } 
                            */
                             if ($row['check_res'] != 'S') {
                                echo '<span class="mybtn" οnclick="location.href=\''.$this->createMobileUrl('my_task', array('utid' => $row['id'])).'\';">查看或提交</span>';
                            } else if($row['task_submit'] != 'Y') {
                                echo '<span class="mybtn" οnclick="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);
    }

 

转载于:https://www.cnblogs.com/sbfnxk201/p/8191410.html

weixin_33939380
关注
WEUI文件上传详解
编程之路
10-30 1885
本文通过我个人设计的系统为案例来教会读者使用weui的uploader，先来看看效果图：                                                                                          图片上传框                                                      ...
weui上传文件完整例子php,weui实现图片上传
weixin_30670745的博客
04-12 1264
您现在的位置是：网站首页>>前端技术>>weuiweui实现图片上传发布时间：2019-04-30 16:37:17作者：wangjian浏览量：1657点赞量：0在weui中有现成的Uploader上传组件实现如下：图片上传0/5var uploadCount = 0;weui.uploader('#uploader', {url: 'XXXX',//上传的url，返回值...
mvc weui上传文件完整demo
06-28
完整前后台demo 带删除功能
weUI 上传图片
zhaofuqiangmycomm的博客
05-15 733
前端代码用的是weUI封装好的样式 <div class="weui-gallery" id="gallery"> <span class="weui-gallery__img" id="galleryImg"></span> <div class="weui-gallery__opr"> <a href="javascript:" class="weui-g...
weui图片上传
09-27
web图片上传前台页面 weui
jqweui上传图片功能-asp.net core
03-27
在本文中，我们将深入探讨如何在ASP.NET Core框架下实现jqweui的图片上传功能，同时结合.NET 6和Visual Studio 2022进行开发。这个功能包括图片的上传、预览、删除以及服务器端的同步操作。由于实际代码可能较为复杂...
简化weui上传图片.zip
03-21
本资源“简化weui上传图片.zip”聚焦于一个常见且实用的功能——图片上传，特别是针对移动端H5环境进行优化。WEUI是一个专为微信Web服务设计的开源UI库，它提供了简洁、直观的界面组件，让开发者能够快速构建出与...
weui上传多图片,压缩,base64编码的示例代码
12-28
因为使用的是weui框架，前面的话去找weui的表单和图片上传组件，说实话，weui的组件写的还不错，作为一个不太懂前端的渣渣可以拿来开箱即用 主要是不用调那么多的样式问题，直接上代码： <div class=weui-cell> ...
weui图片上传完美封装版前后台，集成图片上传、压缩、预览、删除，保存等功能，包括上传进度百分比特效及上传个数显示功能
09-24
基于weui图片上传插件的完美封装，经过多次修改，特别适合jquery weui框架开发使用，集成图片上传、压缩、预览、删除，保存等功能，包括上传进度百分比特效及上传个数显示功能。示例包括上传页面及php后台接收保存...
weui h5多图上传（提交表单方式）
07-04
后台通过List files 参数获取多个文件
基于weui图片上传封装插件
02-19
个人原创基于weui图片上传封装的插件demo，比较实用方便，方便前端开发人员在使用jQueryWeui框架时使用图片上传
使用weui框架的图片上传、预览与删除
05-12
这是一款使用weui框架的前端ui技术，制作的一款可以应用于图片上传、预览与删除的代码，在代码中，我做了图片上传个数的限制，你只需取得存储文件的数组，即可得到图片文件，此代码实现的功能可以应用于所有的web浏览器，包括微信内置的浏览器。
Weui 文件上传完整版示例
风火纶回
06-03 1095
@{ ViewBag.Title = “费用填报”; Layout = “~/Views/Shared/_MForm.cshtml”; } 费用填报 派车单号 ...
微信小程序weui中Uploader上传文件的使用
最新发布
weixin_44319203的博客
10-24 855
【代码】微信小程序weui中Uploader上传文件的使用。
weui上传图片，tp6接
qq_34631220的博客
08-24 359
html <div class="cdj_background1" style="margin-top:10px"> <div class="cdj_top cdj_cu" style="font-size:17px"><text style="color: red">*</text>成果展示</div> <div class="layui-upload"> <div cla
利用weui实现文件上传
小布1994的博客
04-09 925
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片上传</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scal...
微信公众号开发笔记6（WEUI组件实现图片上传、预览、删除）
MidYear的博客
07-13 702
1、新建HTML5，样式自行百度下载。
weui uploader java_WEUI原生以及使用webuploader插件上传方法
weixin_31589747的博客
02-13 212
weui1.0.0webuploder-0.1.5不多说，直接看代码$(function() {// 允许上传的图片类型var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];// 1024KB，也就是 1MBvar maxSize = 1024 * 1024;// 图片最大宽度var maxWidth = ...
使用weui实现多图上传、压缩与Base64编码的实战教程
本文主要探讨了如何在使用WeUI框架时实现多图片上传、压缩以及Base64编码的功能。WeUI是一个专为微信Web服务设计的前端框架，它提供了易于使用的组件，使得开发者能够快速构建符合微信风格的页面。在这个示例中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值