微信內網頁某些安卓手機不能上傳圖片檔案的問題(1)
阿新 • • 發佈:2019-02-06
最近的一個專案是微信公眾號關聯的網站,自然用新技術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;
}