Google drive api 在移动站点上使用google驱动器文件选择器

我们允许用户通过谷歌硬盘上传pdf文件。google drive文件选择器在桌面上运行良好，但在我们的移动响应网站上，我们仍然可以使用标准的文件选择器，用户体验并不理想。它显然是为台式机而优化的

对于响应迅速的移动站点，有没有更好的方法来实现这一点

使用库和google文件选择器

$（函数（$）{$（文档）.ready（函数（）{pdfPicker=new GoogleFilePicker({
apiKey:'XXXXXXXXX'，
客户ID:'XXXXXXX'，
范围：['https://www.googleapis.com/auth/drive.readonly'],
viewId:“PDF”，
onLoad:function（）{
},
onSuccess:函数（数据）{
var元素=$（“#resume_url”）；
element.val（data.downloadUrl+'&token='+data.token）；
元素。更改（）；
},
onCancel：函数（）{
},
负载：真
});
$（'btn'u pdfPicker'u gdrive'）。在（'click'，函数（事件）{
$（'#resume'）.empty（）；
pdfPicker.createPicker（）；
//关闭模式，以便我们可以看到谷歌驱动器选择器。
$（“div[数据审查上传简历]”）.modal（'hide'）；
});

---

我们在加载后调整弹出样式以优化它

CSS

并在构建选择器后立即在JS中添加类

function createPicker() {
    //the rest of your function here
      build();
      picker.setVisible(true);
    //adjust picker size
    $(".picker.shr-q-shr-r-shr-td.picker-dialog-content").addClass("google_picker_popup");
    $(".picker.shr-q-shr-r.picker-dialog").addClass("google_picker_container");
}

这就是结果

---

希望这有帮助

您指的是什么“标准文件选择器”？什么移动平台？一段代码会有所帮助。

.google_picker_popup{
  height: 100% !important;
  width: 100% !important;

}

.google_picker_container{
  height: 80% !important;
  width: 80% !important;
  max-height: 1024px;
  min-width:250px;
  max-width: 1039px;
  top:0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: auto;
}

function createPicker() {
    //the rest of your function here
      build();
      picker.setVisible(true);
    //adjust picker size
    $(".picker.shr-q-shr-r-shr-td.picker-dialog-content").addClass("google_picker_popup");
    $(".picker.shr-q-shr-r.picker-dialog").addClass("google_picker_container");
}