1. 程式人生 > >微信內網頁某些安卓手機不能上傳圖片檔案的問題(1)

微信內網頁某些安卓手機不能上傳圖片檔案的問題(1)

最近的一個專案是微信公眾號關聯的網站,自然用新技術HTML5 了。
在某個手機發布資訊的頁面中,卻碰到了一個詭異的問題。
在某些安卓手機上無法使用上傳圖片功能,你怎麼點都沒用。
微信並沒有對type=file做任何特殊處理。但是在Android 4.4.1/4.4.2系統中,這的確沒法使用。其它版本中如果客戶端如果需要對H5的 <input> 標籤做支援,即在H5支援選擇檔案的功能,可以通過重寫WebViewClient非public的openFileChooser方法來實現。可在4.4.1/4.4.2系統中,該回調方法被廢棄,客戶端無法捕獲使用者在H5頁面上對<input>標籤的點選。
只有自己另外想辦法解決了。

無意中看到可以把讀取檔案這裡的圖片檔案轉成base64字串,然後POST到伺服器上,在伺服器上解析這個字串再轉存為圖片檔案。

另外看到有些說法,說微信也是這樣做的,想一想這樣做確實有道理,為安全考慮確實是這樣的。

網上的沒有找到完整的 C#的例子。只有自己弄了。

下面貼程式碼

前端:

JS程式碼:

在上傳前可以加一些驗證是否為圖片檔案,還有上傳檔案數、大小等等的判斷。

function fileCountCheck(obj){
 if (obj.files && obj.files[0]) {
                    var FR = new FileReader();
                    FR.onload = function (e) {
                        var ImageString = e.target.result;
                       //這個ImageString 就是圖片轉成的base64字串
                    };
                    FR.readAsDataURL(obj.files[0]);
                }
}


在前端用ajax 把這個字串POST到伺服器做處理。

HTML程式碼

<input type="file" name="mulUp[]" multiple="multiple" required="required" id="SelectFile" onchange="fileCountCheck(this)" />


服務端 C#程式碼

這裡是把BASE64的字串做處理後,在伺服器上儲存為圖片檔案。這裡可以判斷上傳的圖片型別,並做相應的儲存。

我這裡是統一儲存為JPG圖片了。

 int index = FileString.IndexOf(',');
            FileString = FileString.Substring(index + 1);
            //要擷取是因為字串前面是一些圖片定義的東西,在一個 逗號前面就是了,需要擷取掉
            string p = Server.MapPath("~/Upload/") + DateTime.Now.Year + "" + DateTime.Now.Month + @"/";
            if (!Directory.Exists(p))
            {
                Directory.CreateDirectory(p);
            }
            try
            {
                byte[] arr = Convert.FromBase64String(FileString);
                MemoryStream ms = new MemoryStream(arr);
                Bitmap bmp = new Bitmap(ms);
                string SavePath = "/Upload/" + DateTime.Now.Year + "" + DateTime.Now.Month + @"/";
                string newFileName = Guid.NewGuid().ToString() + ".jpg";
                //統一將上傳的圖片存為jpg格式
                bmp.Save(p + newFileName, System.Drawing.Imaging.ImageFormat.Jpeg);
                //bmp.Save(txtFileName + ".bmp", ImageFormat.Bmp);
                //bmp.Save(txtFileName + ".gif", ImageFormat.Gif);
                //bmp.Save(txtFileName + ".png", ImageFormat.Png);
                ms.Close();
                return SavePath + "|" + newFileName;
            }
            catch (Exception ex)
            {
                return ex.Message;
            }