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') . '路徑'
    ];
}

           

成果：