Question

微信浏览器，上传文件，点浏览按钮没反应,微信是最新版本。

最新的Android微信5.2版已经可以直接上传了。

28 个回答

Accepted Answer

分享一下我们团队在 微信内置浏览器 上的折腾……

月初要给一个公司的 微信公众平台 做一个“ 美照票选赢大奖 ”的活动，前端总共俩页面（ 上传照片 、 分享投票 ），不久就把美工的样图做成网页了（不仅是 CSS，原生 <input type="file" /> 的外观、功能封装也搞定了），各种 PC、移动端浏览器都测试成功了，可放到微信中实测时就各种坑……

以下是 网上搜索文档、团队实战经验 的总结，主要基于 Android 4.0+、iOS 6.0+、微信 5.2+ ——

过去限制很多的 iOS 版微信 却没出什么大问题，反倒 Android 各版本的适配 让我们各种加班
较新版本的微信并没有对 HTML 原生文件控件 做限制，只是它默认调用 Android 系统自带的 WebView ，限制是怎样的取决于相应版本 Android 的官方代码（有说法是出于安全考虑）
除了 Android v4.4.2 这个中间版本（小米 3、红米 Note 等机型的出厂系统），其它 v4.x 版本的 WebView 基本都可以使用原生文件控件
若同机安装有 QQ浏览器 ，微信可以调用它修缮过的内核，就可以正常使用文件控件（但必须在安装 QQ浏览器之后重启微信才行）
如有某版本的 WebView 不能用文件控件，它的拦截是在底层进行的，所以 JavaScript 引擎 层面并无异常抛出，不会中断程序的执行

再分享一段我手写的 Input File 图片友好版 v0.5 的代码（ jQuery 插件 ）——

// -------------------------------------------------- //
//          >>>  Input-File 图片友好版  <<<
//    [Based on]    jQuery,  jQuery.Browser.js
//    [Version]     v0.5  (2015-7-3 14:26:30)
//        (C)2014-2015    test_32@fyscu.com
// -------------------------------------------------- //
(function (BOM, DOM, $) {
    var URL_Object = BOM.webkitURL || BOM.URL || BOM;
    $.fn.xImage = function (Type_Filter) {
        var $_This = this.find('*').addBack().filter('input[type="file"]');
        Type_Filter = Type_Filter || [ ];
        $_This.parent().css({
            position:    'relative',
            cursor:      'pointer'
        $_This
            .css({
                position:     'absolute',
                'z-index':    999,
                opacity:      0
            .each(function () {
                var $_This = $(this);
                var $_PreView = $_This.siblings('img, img.PreView').eq(0);
                if (! $_PreView.length)
                    $_PreView = $('<img />').before($_This);
                $_PreView.addClass('PreView').css({
                    display:          'inline-block',
                    'max-height':     $(top).height() * (1 / 3),
                    'max-width':      $(top).width() * (1 / 3)
                    .on('Ready',  function () {
                        $_This.css({
                            top:       $_PreView.position().top,
                            left:      $_PreView.position().left,
                            width:     $_PreView.width(),
                            height:    $_PreView.height()
                    }).trigger('Ready').on('load',  function () {
                        $_PreView.trigger('Ready');
            .data('clicks', 0).click(function () {
                var $_This = $(this);
                var Click_Times = $_This.data('clicks');
                if ($.browser.mobile && (++Click_Times > 3)) {
                    BOM.alert("您当前的浏览器无法在本页上传文件……");
                    return false;
                $_This.data('clicks', Click_Times);
            .change(function () {
                var $_This = $(this).data('clicks', 0);
                try {
                    var iFile = arguments[0].target.files[0];
                } catch (iError) {
                    BOM.alert([
                        "您当前 浏览器内核 较为古老，暂不支持【图片上传预览】……",
                        "建议更换为最新版 搜狗、猎豹、傲游 等双核浏览器~"
                    ].join("\n\n"));
                    $_This.show().siblings('img.PreView').remove();
                    return true;
                var iType = iFile.type.split('/');
                if (iType[0] != 'image') {
                    BOM.alert("您所选的文件不是图片……");
                    return false;
                } else if ($.inArray(iType[1], Type_Filter) > -1) {
                    BOM.alert([
                        "此处不能上传", iType[1].toUpperCase(), "格式的图片！"
                    ].join(' '));
                    return false;
                var iReader = new FileReader();
                iReader.onload = function () {
                    $_This.siblings().not('img.PreView, input[type="file"]').hide();
                    var $_PreView = $_This.siblings('img.PreView');
                    $_PreView[0].onload = function () {
                        URL_Object.revokeObjectURL(this.src);
                    $_PreView[0].src = URL_Object.createObjectURL(iFile);
                iReader.readAsBinaryString(iFile);
        return this;
})(self,  self.document,  self.jQuery);

其对应的 HTML 结构是 ——

<form method="POST" action="./xxx">
    <div class="ImageBox">
        <input type="file" />
        <span>上传美照</span>
    </div>
    <button type="submit">完成</button>
</form>