任错错
2017-03-03 02:16
采纳率: 100%
浏览 3.9k
已采纳

微信公众号拍照上传多张图片接口

现在可以往数据库存储多张照片,但是调用不了拍照接口

 <div class="container">
                    <div class="weui_cells weui_cells_form">
                      <div class="weui_cell">
                        <div class="weui_cell_bd weui_cell_primary">
                          <div class="weui_uploader">
                            <div class="weui_uploader_hd weui_cell">
                            <img alt="img" src="/szgmjk/image/icon5.png">
                                        &emsp;
                              <div class="weui_cell_bd weui_cell_primary">现场拍照</div>
                              <div class="weui_cell_ft js_counter">0/6</div>
                            </div>
                            <div class="weui_uploader_bd">
                              <ul class="weui_uploader_files js_previews">
                                <!-- 预览图插入到这 -->
                              </ul>
                              <div class="weui_uploader_input_wrp">
                                <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                    <div class="preview">
                      <div class="weui_mask"></div>
                      <img src="" alt="" />
                      <a href="javascript:;" class="delete" id="delete">delete</a>
                    </div>

                    //拍照上传接口
        // codepen 没办法直接在 body 标签加属性,所以用这里用 js 给 body 添加 ontouchstart 属性来触发 :active
        document.body.setAttribute('ontouchstart', '');
        $(function () {
            // 允许上传的图片类型
            var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
            //10MB
            var maxSize = 10 * 1024 * 1024;
            // 图片最大宽度
            var maxWidth = 300;
            // 最大上传图片数量
            var maxCount = 6;
            var images = [];
            $('.js_file').on('change', function (event) {
                var files = event.target.files;

                // 如果没有选中文件,直接返回
                if (files.length === 0) {
                    return;
                }

                for (var i = 0, len = files.length; i < len; i++) {
                    var file = files[i];
                    var reader = new FileReader();

                    // 如果类型不在允许的类型范围内
                    if (allowTypes.indexOf(file.type) === -1) {
                        $.weui.alert('该类型不允许上传');
                        continue;
                    }

                    if (file.size > maxSize) {
                        $.weui.alert('图片太大,不允许上传');
                        continue;
                    }

                    if ($('.weui_uploader_file').length >= maxCount) {
                        $.weui.alert('最多只能上传' + maxCount + '张图片');
                        return;
                    }

                    reader.onload = function (e) {
                        var img = new Image();
                        img.onload = function () {
                            // 不要超出最大宽度
                            var w = Math.min(maxWidth, img.width);
                            // 高度按比例计算
                            var h = img.height * (w / img.width);
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            // 设置 canvas 的宽度和高度
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(img, 0, 0, w, h);
                            var base64 = canvas.toDataURL('image/png');
                            var base65 = canvas.toDataURL('image/png');
                            var base66 = canvas.toDataURL('image/png');
                            var base67 = canvas.toDataURL('image/png');
                            var base68 = canvas.toDataURL('image/png');
                            var base69 = canvas.toDataURL('image/png');

                            document.getElementById("picture").value = base64;
                            document.getElementById("picture2").value = base65;
                            document.getElementById("picture3").value = base66;
                            document.getElementById("picture4").value = base67;
                            document.getElementById("picture5").value = base68;
                            document.getElementById("picture6").value = base69;

                            // 插入到预览区
                            var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
                            $('.weui_uploader_files').append($preview);
                            var num = $('.weui_uploader_file').length;
                            $('.js_counter').text(num + '/' + maxCount);
                            images.push(base64);

                            // 然后假装在上传,可以post base64格式,也可以构造blob对象上传

                            var progress = 0;
                            function uploading() {
                                $preview.find('.weui_uploader_status_content').text(++progress + '%');
                                if (progress < 100) {
                                    setTimeout(uploading, 30);
                                }
                                else {
                                    // 如果是失败,塞一个失败图标
                                    //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
                                    $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
                                }
                            }
                            setTimeout(uploading, 30);
                        };

                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
            $('.js_previews').on('click', '.weui_uploader_file', function(event){
                var index = $(this).index();
                var img = images[index];
                $('.preview').find('img').attr('src', img);
                $('.preview').show();
            });
        });

        $(function() {
            var msg = $("#msg").val();
            if (msg != "" && msg.length > 0) {
                $.alert(msg);
            }
            var max = 200;
            $('#textarea').on(
                    'input',
                    function() {
                        var text = $(this).val();
                        var len = text.length;
                        $('#count').text(len);
                        if (len > max) {
                            $(this).closest('.weui_cell').addClass(
                                    'weui_cell_warn');
                        } else {
                            $(this).closest('.weui_cell').removeClass(
                                    'weui_cell_warn');
                        }
                    });
        });

求解决,怎么在上传多张图片代码中和拍照接口结合,
如有解决,请留下支付方式,另有重谢。

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 任错错 2019-07-09 16:43
    已采纳

    无人解答,早已自行解决。感谢帮助过的大侠

    已采纳该答案
    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

相关推荐 更多相似问题