weui框架实现上传、预览和删除图片功能代码

下面我将详细讲解使用weui框架实现上传、预览和删除图片功能的完整攻略。

1. 准备工作

首先需要引入weui框架和jQuery库，可以使用以下代码：

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2. HTML代码

接下来我们需要在HTML中创建一个上传图片的容器和相关的元素，可以使用以下代码：

<div class="weui-uploader">
  <div class="weui-uploader__hd">
    <p class="weui-uploader__title">图片上传</p>
    <div class="weui-uploader__info">0/9</div>
  </div>
  <div class="weui-uploader__bd">
    <ul class="weui-uploader__files" id="uploaderFiles">
      <!-- 这里的li元素就是用于展示上传的图片的 -->
    </ul>
    <div class="weui-uploader__input-box">
      <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
    </div>
 </div>
</div>

3. JavaScript代码

3.1 图片上传

使用以下JavaScript代码实现图片上传：

// 获取上传图片的按钮
var $uploaderInput = $('#uploaderInput');
// 获取用于展示上传图片的ul元素
var $uploaderFiles = $('#uploaderFiles');
// 图片数量
var fileCount = 0;
// 图片总大小
var fileSize = 0;
// 实例化一个图片上传的对象
var uploader = weui.uploader("#uploader", {
    url: "your upload url",
    auto: true,
    type: 'file',
    fileVal: 'file',
    compress: {
        width: 1600,
        height: 1600,
        quality: .8
    },
    onBeforeQueued: function (files) {
        // 验证尺寸是否符合要求
        if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {
            weui.alert('请上传图片');
            return false;
        }
        // 验证大小是否符合要求
        if (this.size > 10 * 1024 * 1024) {
            weui.alert('请上传不超过10M的图片');
            return false;
        }
        // 验证图片数量是否超出限制
        if (fileCount + files.length > 9) {
            weui.alert('最多只能上传9张图片');
            return false;
        }
        // 显示图片上传的按钮
        $uploaderInput.show();
        // 更新图片数量和大小
        fileCount += files.length;
        for (var i = 0; i < files.length; i++) {
            fileSize = files[i].size;
            var file = files[i];
            // 添加用于展示图片的li元素
            uploader.addFile(file);
        }
    },
    onProgress: function (procent) {
        // 更新图片上传的进度
        console.log(procent);
    },
    onSuccess: function (ret) {
        // 图片上传成功后的回调函数
        console.log(ret);
    },
    onError: function (err) {
        // 图片上传失败后的回调函数
        console.log(err);
    }
});

上面的代码中，我们使用weui提供的uploader组件，实例化一个图片上传的对象，指定上传图片的地址url、大小、数量等限制条件，并实现了图片上传的回调函数，用于在图片上传成功或失败后进行相关的操作。

3.2 图片预览

使用以下JavaScript代码实现图片预览：

// 图片预览
$uploaderFiles.on('click', 'li', function () {
    // 获取当前点击的图片的元素
    var $this = $(this);
    // 获取用于展示图片的ul元素中所有图片的元素
    var files = $uploaderFiles.find('li');
    // 获取当前点击的图片的索引
    var index = $this.index();
    // 显示图片预览的弹窗
    weui.gallery(files.map(function () {
        return this.style.backgroundImage.replace(/url\(\"|\"\)/ig, '');
    }), {
        start: index,
        onDelete: function (index, deleteData) {
            // 删除当前预览的图片
            delete files[index];
            fileCount--;
            fileSize -= deleteData.size;
            $uploaderFiles.html(files);
        }
    });
});

上面的代码中，我们使用weui提供的gallery组件，实现了图片预览的功能，并提供了删除图片的回调函数，用于在删除图片时更新图片数量和大小等相关信息。

3.3 图片删除

使用以下JavaScript代码实现图片删除：

// 删除图片
$uploaderFiles.on('click', '.weui-uploader__file-delete', function () {
    // 获取当前点击的删除按钮的父元素，即当前删除的图片的元素
    var $parent = $(this).parents('li');
    // 更新图片数量和大小
    fileCount--;
    fileSize -= $parent[0].dataset.size;

    // 删除当前图片的元素
    $parent.remove();
    // 判断图片数量是否少于9张，如果是，则显示上传图片按钮
    if (fileCount < 9) {
        $uploaderInput.show();
    }
});

上面的代码中，我们为删除按钮添加了点击事件，用于实现删除图片的功能。