weui多图上传+后台（以laravel为例子）

前端代码：

<div class="weui-uploader">
    <div class="weui-uploader__hd">
        <p class="weui-uploader__title">病害图片上传(最多五张)：</p>
        <div class="weui-uploader__info" id="uploader_count" data-total="5" data-val="0">0/5</div>
    </div>
    <div class="weui-uploader__bd">
        <ul class="weui-uploader__files" id="uploaderFiles">

        </ul>
        <div class="weui-uploader__input-box">
            <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
        </div>
    </div>
</div>

可以选择相册的图片，也可以调动相机

js代码：基本是在weui的基础上，同时参考了一些大佬们的代码，修改得到的

var fileArr=new Array();
// 最大上传图片数量
var imgTotal = 0;
// 记录当前已上传数量
var imgCount = 0;

$(function() {
    var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
        $gallery = $("#gallery"),
        $galleryImg = $("#galleryImg"),
        $uploaderInput = $("#uploaderInput"),
        $uploaderFiles = $("#uploaderFiles");
        $uploaderInput.on("change", function (e) {
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            var length = fileArr.length;    // 已选择的图片数量

            imgTotal = parseInt($("#uploader_count").attr("data-total"));
            imgCount = parseInt($("#uploader_count").attr("data-val"));

            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                if (length + i + 1 > imgTotal) {    
                    break;
                }
                fileArr.push(file);
                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                $uploaderFiles.append($(tmpl.replace('#url#', src)));

                imgCount = imgCount + 1;
            }
            checkPhotoSize();
            updateImgCount();
        });

        //控制显示的照片数量
        function checkPhotoSize() {
            if (fileArr.length > imgTotal-1) {   // 原来：fileArr.length > 2
                $(".weui-uploader__input-box").hide();
            } else {
                $(".weui-uploader__input-box").show();
            }
        }

        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });

        //删除图片
        $(".weui-gallery__del").click(function () {
            $uploaderFiles.find("li").eq(index).remove();
            fileArr.splice(index, 1);
            imgCount = imgCount-1;
            checkPhotoSize();
            updateImgCount();
        });


        //更新记录数量的$uploaderCount中的值和显示内容
        function updateImgCount() {
            $("#uploader_count").attr("data-val", imgCount);
            $("#uploader_count").html("" + imgCount + "/" + imgTotal + "");
        }

    });

使用js将表单数据传到后台

$(document).ready(function () {
    // submitBtn为按钮的id
    $("#submitBtn").click(function () {
        // diseaseDetailForm为form标签的id
        var form = new FormData(document.getElementById("diseaseDetailForm"));       
        var _token = "{{csrf_token()}}";

        form.append('_token',_token);
        // fileArr是一个全局变量，用来存放上传的图片
        if (fileArr.length != 0) {
            for (var i = 0; i < fileArr.length; i++) {
                form.append("imgFile[]",fileArr[i]);
            }
        }

        $.ajax({
            url : '',
            data : form,
            type : 'post',
            processData : false,
            contentType : false,
            success : function (data) {
                if (data.error == 200) {
                    layer.alert(data.message, {icon: 6},function () {
                        location.href = '';
                    })
                }else {
                    layer.msg(data.message,{icon: 5})
                }
            }
        })
    })
})

后台接收代码（这里以laravel为例，因为项目中上传方法是封装好的，所以我就简单的写个上传方法）

public function storeForm(Request $request)
{
    // 接收上传的代码
	$imgArr = $request->file('imgFile');
	// 存储上传的病害图片
	$imgPath = array();
    for ($i = 0; $i < count($imgArr); $i++) {
        $imgPath[$i] = $this->saveImg($imgArr[$i], 'testImg', md5(uniqid(mt_rand(), true)))['path'];
    }
}

public function saveImg($file, $folder, $file_prefix)
{
	// 构建存储的文件夹规则，值如：uploads/images/avatars/201709/21/
    // 文件夹切割能让查找效率更高。
    $folder_name = "uploads/images/$folder/" . date("Ym/d", time());

    // 文件具体存储的物理路径，`public_path()` 获取的是 `public` 文件夹的物理路径。
    // 值如：/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/
    $upload_path = public_path() . '/' . $folder_name;

    // 获取文件的后缀名，因图片从剪贴板里黏贴时后缀名为空，所以此处确保后缀一直存在
    $extension = strtolower($file->getClientOriginalExtension()) ?: 'png';

    // 拼接文件名，加前缀是为了增加辨析度，前缀可以是相关数据模型的 ID
    // 值如：1_1493521050_7BVc9v9ujP.png
    $filename = $file_prefix . '_' . time() . '_' . str_random(10) . '.' . $extension;


	// 如果上传的不是图片将终止操作
    if ( ! in_array($extension,["png", "jpg", "gif", 'jpeg'])) {
        return false;
    }


 	// 将图片移动到我们的目标存储路径中
    $file->move($upload_path, $filename);

    return [
        'path' => "/$folder_name/$filename",    // 在img的src处再拼接头 config('app.url') . '路径'
    ];
}

成果：