最近的一个项目是微信公众号关联的网站,自然用新技术HTML5 了。
在某个手机发布信息的页面中,却碰到了一个诡异的问题。
在某些安卓手机上无法使用上传图片功能,你怎么点都没用。
微信并没有对type=file做任何特殊处理。但是在Android 4.4.1/4.4.2系统中,这的确没法使用。其它版本中如果客户端如果需要对H5的 标签做支持,即在H5支持选择文件的功能,可以通过重写WebViewClient非public的openFileChooser方法来实现。可在4.4.1/4.4.2系统中,该回调方法被废弃,客户端无法捕获用户在H5页面上对标签的点击。
只有自己另外想办法解决了。
无意中看到可以把读取文件这里的图片文件转成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代码
服务端 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;
}