使用WEUI uploader上传图片

最新推荐文章于 2025-06-07 09:11:19 发布

杨航 AI

最新推荐文章于 2025-06-07 09:11:19 发布

阅读量1.7w

点赞数 1

本文提供了一套使用WEUIuploader组件实现图片上传的完整方案，包括前端HTML与JS代码及后端PHP接收处理代码。博主亲测可用，适用于希望快速实现图片上传功能的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用WEUI uploader上传图片，博主费了很大的劲总算找到完整的了，并且带后台接收代码，有需要的朋友拿去吧，亲测可用！

一、html代码

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css" />

<div class="weui_uploader">
    <div class="weui_uploader_hd weui_cell">
        <div class="weui_cell_bd weui_cell_primary">图片上传</div>
        <div class="weui_cell_ft js_counter">0/6</div>
    </div>
    <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" multiple=""></div>
    </div>
</div>

二、JS代码

$(function () {
    // 允许上传的图片类型
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    // 1024KB，也就是 1MB
    var maxSize = 1024 * 1024;
    // 图片最大宽度
    var maxWidth = 300;
    // 最大上传图片数量
    var maxCount = 6;
    $('.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) {
                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 的宽度和高度
                    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></li>');
                    $('.weui_uploader_files').append($preview);
                    var num = $('.weui_uploader_file').length;
                    $('.js_counter').text(num + '/' + maxCount);
 
                    // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传
 
                    var progress = 0;
                    function uploading() {
                        $preview.find('.weui_uploader_status_content').text(++progress + '%');
                        if (progress < 100) {
                            setTimeout(uploading, 30);
                        }
                        else {
                            // 如果是失败，塞一个失败图标
                            //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
                            $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
                        }
                    }
                    setTimeout(uploading, 30);
                };
 
                img.src = e.target.result;
 
                $.post("/wap/uploader.php", { img: e.target.result},function(res){
                    if(res.img!=''){
                        alert('upload success');
                        $('#showimg').html('<img src="' + res.img + '">');
                    }else{
                        alert('upload fail');
                    }
                },'json');
            };
            reader.readAsDataURL(file);
 
        }
    });
});

三、PHP代码

$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 = "../upload/".time().$ext;
 
// 生成文件
file_put_contents($photo, base64_decode($data), true);
 
// 返回
header('content-type:application/json;charset=utf-8');
$res = array('img'=>$photo);
echo json_encode($res);