微信内网页某些安卓手机不能上传图片文件的问题(1)

最新推荐文章于 2023-11-27 10:56:26 发布

天下在我心

最新推荐文章于 2023-11-27 10:56:26 发布

阅读量2.1w

点赞数

CC 4.0 BY-SA版权

文章标签： Base64 html5 手机微信

本文链接：https://blog.youkuaiyun.com/zx75991/article/details/50409483

文章详细阐述了解决在Android 4.4.1/4.4.2系统下微信公众号网站上传图片功能失效的方法。通过将图片文件转换为base64字符串并POST到服务器进行处理，避免了直接使用<input type=file>导致的客户端无法捕获用户操作问题。提供了前端JS代码、服务端C#代码实现细节，确保了图片上传的稳定性和安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的一个项目是微信公众号关联的网站，自然用新技术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;
            }