input兼容安卓与ios分别打开相机与相册

最新推荐文章于 2025-05-09 18:24:41 发布

大佬们救救孩子吧

最新推荐文章于 2025-05-09 18:24:41 发布

阅读量1.7k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/zhao_guang_liang/article/details/104461701

版权

本文介绍了一个针对iOS设备优化的图片上传组件实现细节。该组件能够根据设备类型（iOS或其他）调整其功能，包括从相册选择图片、使用相机拍摄图片以及设置文件输入的属性，如接受的文件类型和是否允许多选。通过JavaScript和jQuery，组件实现了响应式设计，确保了在不同设备上的良好用户体验。

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

        var ua = navigator.userAgent.toLowerCase();//获取浏览器的userAgent,并转化为小写——注：userAgent是用户可以修改的
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);//判断是否是苹果手机，是则是true
        if (isIos) {
            $("#file").bind("click", function () {
                var that = this;
                open()//弹出选择项 相机  相册
                $('#myphoto').unbind().click(function () {
                    quxiao()//关闭选择弹框
                    $("#file").removeAttr("capture");
                    $("#file").click();
                    $("#file").unbind().change(function (e) {
                        if ($('#file').val() == '') {
                            return false;
                        }
                        var filePath = $(this).val();//获得上传的文件
                    })
                })
                $('#mycamera').unbind().click(function () {
                    quxiao()//关闭选择弹框
                    $("#file").attr("capture", "camera");
                    $("#file").click();
                    $("#file").unbind().change(function (e) {
                        var index = e.currentTarget.dataset.id;
                        if ($('#file').val() == '') {
                            return false;
                        }
                        var filePath = $(this).val();//获得拍好的图片
                    })
                })
            })
        } else {
            $("#file").bind("click", function () {
                var that = this;
                open()
                $('#myphoto').unbind().click(function () {
                    quxiao()
                    $("#file").attr('accept', "image/png,image/jpg,image/gif,image/JPEG")
                    $("#file").attr('multiple', "multiple");
                    $("#file").removeAttr("capture");
                    $("#file").click();
                    $("#file").unbind().change(function () {
                        if ($('#file').val() == '') {
                            return false;
                        }
                        var filePath = $(this).val();
                    })
                })
                $('#mycamera').unbind().click(function () {
                    quxiao()
                    $("#file").attr('accept', "image/*")
                    $("#file").removeAttr("multiple");
                    $("#file").attr('capture', "camera");
                    $("#file").click();
                    $("#file").unbind().change(function () {
                        if ($('#file').val() == '') {
                            return false;
                        }
                        var filePath = $(this).val();
                    })
                })
            })
        }