應廣大讀者建議，已經將該專案原始碼提交到地址：
https://download.csdn.net/download/u014466109/10465677
與本部落格相關的多圖壓縮上傳程式碼在dashen/service/ask.html，請解壓專案並移動到hbuilder中開啟。

欲實現效果圖

提出需求點：

1. 使用者可自由新增刪除替換多張圖片，並且顯示相應縮圖，限制為8張
2. 使用者可選擇壓縮圖或直接上傳原圖功能
3. 返回提醒使用者會丟失填寫的資訊

下面一個個實現上述需求，從簡單到複雜：

需求3：

使用者返回彈出提示框，使用mui.confirm如下：

var oldBack = mui.back;
mui.back=function
 
(e){
    mui.confirm("尚未提交，返回後將會丟失填寫內容物，是否返回？","返回確認",['返回','取消'],function(e){
        if(e.index==0)
            oldBack();
    })
}

（以上程式碼買應寫在mui.plusReady()之中，因為裡面需要用到html5+的方法，mui.back()就是5+方法）

第一步克隆了一個mui.back，因為下面他自己會被重寫了，而真正返回的時候還是需要用到原來的mui.back()！

重寫是為了再返回前執行一段邏輯，按照官方的說法，confirm彈出是非同步執行（非阻塞）所以另外一種在mui.init({beforeBack:function})的方式是不合適，因為beforeBack選項要求的是阻塞的，可能會導致還沒有按下confirm中的按鈕，因為執行了return true而退出了，彈出視窗就顯得沒有意義了！只能使用重寫back方法的辦法了！

mui.confirm傳入四個引數，提示主內容，標題，按鈕陣列，回撥函式（對按鈕陣列的下表進行判斷）

自由增刪改圖片

qq空間發表說說可以攜帶圖片，通過縮圖的形式讓使用者修改自己要上傳的圖片，不過騰訊做的那個高階多了，還可以拖拽圖片開啟大圖編輯等等，在此只實現最簡單的功能。

專門寫一個函式來實現這個功能：init_image_add()

//初始化圖片新增器
function init_image_add() {
    //上傳圖片上限,超過不現實加號
    if(question.files.length >= IMG_MAX_NUM)
        return;
    var
 
 placeholder = document.createElement('div');
    placeholder.setAttribute('class', 'image-item space');

    //刪除圖片
    var closeButton = document.createElement('div');
    closeButton.setAttribute('class', 'image-close');
    closeButton.innerHTML = 'X';
    //小X的點選事件
    closeButton.addEventListener('tap', function(event) {
        removeFile(getChildrenIndex(placeholder)); //刪除實際圖片陣列元素，先刪除陣列中的
        imageList.removeChild(placeholder); //刪除ui，必須後刪除，否則節點會找不到了
        if(question.files.length >= IMG_MAX_NUM - 1)
            init_image_add();
        event.stopPropagation();
    }, false);

    placeholder.addEventListener('tap', function(event) {
        var btnArray = [{
            title: "相簿"
        }, {
            title: "拍照"
        }];

        //actionsheet
        plus.nativeUI.actionSheet({
            title: "選擇圖片",
            cancel: "取消",
            buttons: btnArray
        }, function(e) {
            var i = e.index;
            switch(i) {
                case 0:
                    break;
                case 1:
                    plus.gallery.pick(function(e) {
                        plus.io.resolveLocalFileSystemURL(e, function(entry) {
                            var url = entry.toLocalURL();
                            var name = url.substr(e.lastIndexOf('/') + 1);

                            //壓縮取得縮圖
                            plus.zip.compressImage({
                                src: url,
                                dst: '_doc/' + name,
                                overwrite: true,
                                quality: 50,
                                height: '300px',
                                clip: {
                                    top: "25%",
                                    left: "25%",
                                    width: "300px",
                                    height: "300px"
                                }
                            }, function(zip) {
                                placeholder.style.backgroundImage = "url('" + zip.target + "')";
                                if(!placeholder.classList.contains('space')) { //已有圖片
                                    exFile(getChildrenIndex(placeholder), url);
                                } else { //加號
                                    placeholder.classList.remove('space');
                                    addFile(url);
                                    init_image_add();
                                }
                            }, function(zip) {
                                mui.toast('壓縮失敗！');
                            });

                        }, function(e) {
                            console.log("讀取相簿檔案錯誤：" + e.message);
                        });

                    }, function(e) {
                        console.log(e.message);
                    }, {});
                    break;
                case 2:
                    plus.camera.getCamera().captureImage(function(e) {
                        plus.io.resolveLocalFileSystemURL(e, function(entry) {
                            var url = entry.toLocalURL();
                            var name = url.substr(e.lastIndexOf('/') + 1);

                            //壓縮
                            plus.zip.compressImage({
                                src: url,
                                dst: '_doc/' + name,
                                overwrite: true,
                                quality: 50,
                                height: '300px',
                                clip: {
                                    top: "25%",
                                    left: "25%",
                                    width: "300px",
                                    height: "300px"
                                }
                            }, function(zip) {
                                placeholder.style.backgroundImage = "url('" + zip.target + "')";
                                if(!placeholder.classList.contains('space')) { //已有圖片
                                    exFile(getChildrenIndex(placeholder), url);
                                } else { //加號
                                    placeholder.classList.remove('space');
                                    addFile(url);
                                    init_image_add();
                                }
                            }, function(zip) {
                                mui.toast('壓縮失敗！');
                            });
                        }, function(e) {
                            console.log("讀取拍照檔案錯誤：" + e.message);
                        });
                    }, function(s) {
                        console.log("error" + s);
                    }, {});
                    break;
            }
        });

    }, false);

程式碼有點長，只能作為參考，講一下其中的演算法：

首先這個函式應該在plusReady()內呼叫，並且在載入頁面的時候就要呼叫了！

這個函式作用：生成一個圖片新增按鈕：

如圖所示的“+”號，並且為這個新增的加號新增監聽事件
1. 點選“+”號彈出actionsheet選擇相簿或者相機新增圖片
2. 點選右上角“x”號可以刪除一張圖片

新增的方式是使用js生成dom並且插入到相應的節點

 var placeholder = document.createElement('div');
 placeholder.setAttribute('class', 'image-item space');

 //刪除圖片
 var closeButton = document.createElement('div');
 closeButton.setAttribute('class', 'image-close');
 closeButton.innerHTML = 'X';

以下是將會生成的對應的html程式碼

<div class="image-item space" id="img1">
    <div class="image-close">x</div>
</div>

可以想到這個函式應該要遞迴呼叫，這個遞迴是基於事件的，什麼事件呢？

就是每一次新增完一張圖片的事件，比如途中加號前面一張圖被新增完成後立刻就會遞迴一次，呼叫init_image_add()自己

給個流程圖：

壓縮圖片：

使用：plus.zip.compressImage

html5+官方文件：

例：

//壓縮取得縮圖
plus.zip.compressImage({
    src: url,
    dst: '_doc/' + name,
    overwrite: true,
    quality: 50,
    height: '300px',
    clip: {
        top: "25%",
        left: "25%",
        width: "300px",
        height: "300px"
    }
}, function(zip) {
    placeholder.style.backgroundImage = "url('" + zip.target + "')";
    if(!placeholder.classList.contains('space')) { //已有圖片
        exFile(getChildrenIndex(placeholder), url);
    } else { //加號
        placeholder.classList.remove('space');
        addFile(url);
        init_image_add();
    }
}, function(zip) {
    mui.toast('壓縮失敗！');
});

方法傳入的引數：

1. 壓縮引數：

1. 成功回撥函式

2. 失敗回撥函式

最終上傳，多圖壓縮！

上傳原圖不在贅述，直接跳過此處，參考uploader上傳即可^_^

這裡是有一點小麻煩，個人折騰了一個小時才算弄完美了

千萬注意，compressImage方法是非同步執行的，也就是說，如果你打算將所有要上傳的圖片在for迴圈中遍歷並且壓縮是不妥當的，因為這些圖片將會並行壓縮，而由於是多圖上傳，你不知道所有圖片壓縮完成是什麼時候，一張圖的話可以直接在成功的回撥函式中執行後面的邏輯

我採用了遞迴的方法解決了多圖壓縮並且壓縮全部完成後再執行後面的邏輯，相當於強行把一個非同步的函式寫成了同步（阻塞）函式，需要結合“回撥函式”+“遞迴呼叫”！

程式碼如下：

//使用者未選取上傳原圖時上傳前呼叫
function zip_upload_imgs(len = question.files.length - 1) {
    //第一次遞迴顯示等待
    if(len == question.files.length - 1)
        plus.nativeUI.showWaiting("正在壓縮圖片...", {
            back: "none"
        });
    //當長度小於0時，結束遞迴
    if(len < 0) {
        //關閉等待
        plus.nativeUI.closeWaiting();
        return submitAsk();
    }

    //上傳壓縮圖
    var url = question.files[len];
    plus.zip.compressImage({
        src: url,
        dst: '_doc/zip_' + url.substr(url.lastIndexOf('/') + 1),
        overwrite: true,
        quality: 50,
        height: "90%",
    }, function(zip) {
        //壓縮成功，替換原圖路徑
        question.files[len] = zip.target;
        zip_upload_imgs(--len);
    }, function() {
        //壓縮失敗
        mui.toast('壓縮失敗！');
    });
}

這個函式就有意思了，遞迴出現在當前圖片壓縮成功後呼叫（在回撥函式中遞迴），這樣就解決了非同步的問題，等待壓縮而不執行之後的邏輯！

當然這裡因為壓縮時間可能會長一點，需要用到等待視窗提供使用者友好，以免使用者不知道這段時間是在壓縮！

這個遞迴函式預設傳入的是需要壓縮的圖片的陣列長度值，這個圖片陣列（question.files）是個全域性或者說相對於函式來說是更加全域性的，他不會因為函式結束而回收！處於函式作用域之外！

陣列是反向遞迴的，下標從大到小，最大的時候第一次執行函式所以顯示等待提示，最後一次是當下標小於0時（陣列下標越界）結束遞迴，中間每一次執行完，遞迴前將下標-1，傳入下一次遞迴！

在return後面緊跟著的是一個一直在等待著的sumitAsk()函式，這個函式是最終上傳圖片+提交表單的！之所以說是“一直等待著的提交函式”，因為他本來會因為非同步執行的“plus.zip.compressImage”而先執行掉，導致圖片沒有壓縮就上傳了，我之前折騰了很久就是因為這個問題，如果不按照上述的回撥+遞迴模式，圖片還在壓縮，sumit就執行了，那麼圖片陣列沒有變，依然上傳了原圖！

JavaScript中有的是非同步函式，有的是同步函式，需要嚴格注意，非同步函式會重新開啟一個“時間線”去執行自己，忽略掉同步的函式，所以應該要做到等待非同步函式執行完成後繼續執行同步函式！

上傳圖片

使用函式：plus.uploader.createUoload()

官方說明

我需要上傳
1. 圖片檔案（根據上述的圖片陣列，question.files，其中儲存的都是要上傳的圖片的絕對路徑）
2. 表單資料

示例如下：

function submitAsk() {
    //建立連線
    var url = HTTP_DOMAIN + "Service/ask";
    var uploader = plus.uploader.createUpload(url, {
        method: 'POST'
    }, function(upload, status) {
        plus.nativeUI.closeWaiting();
        if(status == 200) {
            var res = JSON.parse(upload.responseText);
            //伺服器方登陸失效
            if(res.login == 0) {
                plus.nativeUI.toast(res.info);
                app.clearToken();
                app.toLogin();
                return false;
            }
            console.log(upload.responseText);
            if(res.status == 1) {
                mui.alert("您的問題已提交，等待附近的人解答", "發表成功", "確定", function() {
                    mui.back();
                });
            } else {
                mui.toast(res.info);
            }
        } else {
            mui.toast("網路伺服器連線失敗！稍後重試");
        }
    });

    //新增上傳資料
    for(key in question) {
        if(key == "files")
            continue;
        uploader.addData(key, question[key]);
    }

    //如果有禮物圖片就上傳
    if(question.gift_img != "") {
        uploader.addFile(question.gift_img, {
            key: "gift_img"
        });
    }

    //新增上傳檔案
    for(var i = 0; i < question.files.length; i++) {
        uploader.addFile(question.files[i], {
            key: "img" + i
        });
    }

    //開始上傳任務
    plus.nativeUI.showWaiting("正在提交...",{back:"none"});
    uploader.start();
}

注意addData和addFile的使用：

其中addData是上傳資料的鍵值對，就像表單name和value一樣一一對應，在這之前已經放入了question物件之中：

document.getElementById("submit").addEventListener("tap", function() {
    //獲取表單資料
    question.title = document.getElementById("title").value;
    question.content = document.getElementById("content").value;
    question.gift_img = document.getElementById("gift_img").getAttribute("src");
    question.reward = document.getElementById("reward").value;
    question.message = document.getElementById("message").value;
    question.price = document.getElementById("price").value;
    console.log(JSON.stringify(question));

    /*
     * 必填專案：標題，內容，難度
     */
    if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE)
        return mui.toast("連線網路失敗，請稍後再試");
    if(trim(question.title) == "")
        return mui.toast("請給出問題標題！");
    if(trim(question.content) == "")
        //判斷網路連線
        return mui.toast("無法提交，請詳細填寫以下問題內容！");
    if(question.star <= 0 || question.star > 5)
        return mui.toast("請給出問題難度！");

    //使用者未選擇上傳原圖時，壓縮所有上傳圖片
    if(!document.getElementById("high_img").classList.contains("mui-active") && question.files.length > 0) {
        zip_upload_imgs();
    } else {
        submitAsk();
    }

}, false);