微信浏览器上传图片和文件

前两个月在做公众页面的开发，有一个在微信自带浏览器内上传文件和图片的需求，在讨论了可行性分析之后，决定尝试实现一下这个功能。

经过网上查阅，发现微信浏览器貌似限制了上传文件的功能，于是开始着手研究。发现在其他浏览器上是可行的。

 

下面先开始图片部分:

首先我们需要有一个input来选择手机中的相册，其中input的属性accept定义的是接收图片的类型，属性multiple定义是否可以多选。

后来发现multiple属性在IOS中有效，在Android中无效。

html部分

 

<div class="upload_part">
        <form id='uploadForm'>
            <img id="pic" src="img/add_img.jpg">
            <input id="upload" name="images" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" style='display:none' multiple />
            <button type="button" id='uploadPicButton'>确定上传</button>
            <button type="button" id='CancelButton'>取消</button>
        </form>
        <div class="show_img"></div>
    </div>

 

 

 

jq部分

接着我们需要点击input来选择获取图片路径，

 

// 点击图标触发input onchange事件
    $('#pic').click(function(event) {
        $("#upload").click();
        $("#upload").on("change", function() {
            preview_image();
        });
    });

 

这里有个需求，判断最大只能上传六张图片；

于是写成函数

 

// 选择多图加上预览函数
    function preview_image() {
        var total_file = document.getElementById("upload").files.length;
        if (total_file > 6) {
            alert('最多只六张哦');
        } else {
            for (var i = 0; i < total_file; i++) {
                var img = $("<img/>");
                // 三分之一的宽度
                img.attr("style", "height:6.5rem;width:30%;padding:1.5%");
                img.attr("src", URL.createObjectURL(event.target.files[i]));
                $('#pic').hide();
                // 渲染
                $('.show_img').prepend(img);
            }
        }
    }

 

 

 

 

 

 

用ajax上传，这里请求传值用了表单对象，

 

简单说一个请求中 表单对象 和 表单 serialize()函数的区别，serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。而表单对象一般用于对input type="file"的请求操作，比如图片和文件的上传。

至此上传图片完成，在IOS和Android系统中都能正常调用。

 

// 开始上传
    $('#uploadPicButton').click(function(event) {
        var formData = new FormData($('#uploadForm')[0]);
        // if (($('#pic').attr('src') == "img/add_img.jpg")) {
        //     alert('你还没有选择照片，请重新选择');
        // } else {
        // console.log($('#upload').val().split(';'));
        console.log(formData)
        // 改变按钮文本
        $(this).css('background-color', 'gray');
        $(this).html('正在上传....')
        $.ajax({
            url: '/xxxxxx/',
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            // 成功
            success: function(data) {
                if (data.status_code == 500) {
                    alert("添加群相册相片失败");
                    $('#uploadPicButton').html('上传失败，点击图片重新选择');
                } else if (data.status_code == 400) {
                    alert('请选择正确的图片类型');
                    $('#uploadPicButton').html('请你点击图片重新选择');
                } else {
                    // 成功提示出现 定时1500毫秒
                    $('.success_mask').show();
                    setTimeout(function() {
                        location.reload();
                    }, 1500)
                }
            }
        });
    });

 

 

 

 

 

 

 

下面开始文件部分的尝试。

html部分

 

<!-- 上传遮罩 -->
    <div class="upload_part">
        <!-- 表单部分 -->
        <form enctype="multipart/form-data">
            <!-- input file；类型 可一次传多个文件 -->
            <input id='file_' style='display:none' name="files" type="file" accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,application/pdf" multiple/>
            <button type="button" id='uploadPicButton'>确定上传</button>
            <button type="button" id='CancelButton'>取消</button>
        </form>
        <!-- 预览文件的列表 -->
        <ul class="show_file_name">
        </ul>
        <img id="pic" src="img/add_img.jpg">
    </div>

 

 

 

 

 

jq部分

 

$('#pic').click(function(event) {
        $('#file_').click();
        $('#file_').on('change', function(e) {

            var total_file = document.getElementById("file_").files.length;
            if (total_file > 6) {
                alert('最多只能上传6个文件哦');
            } else {
                var img = '';
                for (var i = 0; i < total_file; i++) {
                    img += `<li class='file_preview' style='color:#ffffff'>${e.currentTarget.files[i].name}</li>`
                }
                $('#pic').hide();
                $('.show_file_name').append(img);
                var filelength = $('.show_file_name li');
                console.log(filelength);
                for (var i = 0; i < filelength.length; i++) {
                    if (filelength.eq(i).html().slice(-3) == 'doc' || filelength.eq(i).html().slice(-3) == 'ocx') {
                        filelength.eq(i).css('background', '#124da9');
                    } else if (filelength.eq(i).html().slice(-3) == 'txt') {
                        filelength.eq(i).css('background', '#208820');
                    } else if (filelength.eq(i).html().slice(-3) == 'xls' || filelength.eq(i).html().slice(-3) == 'lsx') {
                        filelength.eq(i).css('background', '#f57629');
                    } else if (filelength.eq(i).html().slice(-3) == 'ptx' || filelength.eq(i).html().slice(-3) == 'ppt') {
                        filelength.eq(i).css('background', '#208820');
                    } else if (filelength.eq(i).html().slice(-3) == 'pdf') {
                        filelength.eq(i).css('background', 'rgba(255, 0, 0, 0.64)');
                    }
                }
            }
        });
    });

 

 

 

上传：

 

$('#uploadPicButton').click(function(event) {
        var formData = new FormData($('form')[0]);
        $(this).css('background-color', 'gray');
        $(this).html('正在上传....')
        $.ajax({
            url: '/xxxxxx/',
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                if (data.status_code == 500) {
                    alert("添加群文件失败");
                    $('#uploadPicButton').html('上传失败，重新选择');
                } else if (data.status_code == 400) {
                    alert('请选择正确的文件类型');
                    $('#uploadPicButton').html('请你点击重新选择');
                } else {
                    $('.success_mask').show();
                    setTimeout(function() {
                        location.reload();
                    }, 1500)
                }
            }
        });
    });

 

 

 

实测部分Android手机可以上传，IOS11以上版本可以上传，其他手机无法上传，原因还在探索。

草草总结写的粗糙，请各位大神不吝赐教，会慢慢更新。欢迎指点评论。