專案裡邊這次用到了移動端上傳圖片，拿出來分享下。

1.首先是思路，在input 發生change的時候判斷瀏覽器時候支援圖片預覽，支援的情況下校驗圖片的格式，圖片的大小，之後將拿到的圖片進行canvas壓縮，圖片轉base64,然後上傳。

2.程式碼

            $(".file").on("change", function() {
                var that = $(this);

                //判斷是否支援FileReader
                if(window.FileReader) {
                    var
 
 reader = new FileReader();
                } else {
                    $(".u-pop").showTip("您的裝置不支援圖片預覽功能，如需該功能請升級您的裝置！", "", "確定");
                }


                    //獲取檔案
                    var file = $(this)[0].files[0];
                    var imageType = /^image\//;
                    //是否是圖片
 

                    if(!imageType.test(file.type)) {
                        $(".u-pop").showTip("請選擇正確圖片！", "", "確定");
                        return;
                    }
                    if(file.size / 1024 / 1024 > 5) {
                        $(".u-pop").showTip("圖片不能大於5M！", "", "確定");
                        return
 
;
                    }
                    if(imglength == 4) {
                        that.parent().hide();
                    }

                    //讀取完成
                    reader.onload = function(e) {
                        var image = new Image();
                        image.src = e.target.result;
                        //alert(e.target.result.length)
                        var base64 = null;
                        image.onload = function() {
                            var expectWidth = this.naturalWidth;
                            var expectHeight = this.naturalHeight;
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");
                            canvas.width = expectWidth;
                            canvas.height = expectHeight;
                            ctx.drawImage(this, 0, 0, expectWidth, expectHeight, 0, 0, expectWidth, expectHeight);

                            base64 = canvas.toDataURL("image/jpeg", 0.3);//0.3為降低的品質數
                            //alert(base64.length)
                            //獲取圖片dom
                            var section = document.createElement('section');
                            section.setAttribute("class", "up-section ");
                            var imgdelete = document.createElement("img");
                            imgdelete.setAttribute("src", "");
                            var img = document.createElement("img");
                            var addimg = document.getElementsByClassName("addimg")[0]
                            //圖片路徑設定為讀取的圖片
                            img.src = base64;
                            img.className = "up-img";
                            section.appendChild(img);
                            that.parent().before(section);
                        };
                    };
                    reader.readAsDataURL(file);         

            });

3.請求後臺介面

                    var files = list.eq(i).find(".slides-show img");                        　　　　
                        var fd = new Array();
                        for(var j = 0; j < files.length; j++) {
                            fd[j] = files[j].src;
                        };
                    $.ajax({
                        url: xxx,
                        type: 'post',
                        data: {
                            token: token,
                            datalist: fd
                        },
                        traditional: true,//fd為陣列是需要加
                        //processData: false,
                        //contentType: false,
                        success: function(data) {
                            $(".u-pop").showTip(" 評價成功！");
                            var t = setTimeout(function() {
                                window.history.go(-1);
                                clearTimeout(t);
                            }, 1000);

                        },
                        error: function(e) {
                            $(".u-pop").showTip("評價失敗", "", "確定");
                        }
                    });

不足知促沒有用formdata做二進位制的處理，原因後端暫時不支援。