时间戳

首页 > 解决方案 > 发送前的jquery fileinput getlocation

jquery - 发送前的jquery fileinput getlocation

问题描述

$("#upload-excel").fileinput({
    required: true,
    browseClass: "btn btn-secondary input-custom-query",
    browseIcon: "",
    removeClass: "btn btn-danger",
    removeLabel: "",
    removeIcon: "<i class='icon-trash-alt1'></i>",
    showUpload: true,
    uploadAsync: false,
    uploadUrl: $('#upload-excel').attr('data-route'),
    uploadExtraData:{
      '_token': $('meta[name="csrf-token"]').attr('content')
    },
    allowedFileExtensions: ['xls', 'xlsx'],
    maxFileSize: 264000
  }).on('filebatchuploadsuccess', function (event, data) {
    let result = data.response.data;
    for (let i = 0; i < result.length; i++) {
      markup(result[i][0].a, result[i][0].b, result[i][0].c);
    }

    $('#modal_result').modal('show');
  }).on('filebatchuploaderror', function (event, data) {
    alert('Err!');
  });

我想用 uploadExtraData 发送位置，但地理位置正在异步工作。我应该怎么说在上传之前等待 getCurrentPosition？

我想在每次文件上传之前获取用户的经纬度信息。

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
    });
  } else {
     latitude = 0;
     longitude = 0;
  }

标签： jquery

解决方案

考虑以下示例。

$("#upload-excel").fileinput({
  required: true,
  browseClass: "btn btn-secondary input-custom-query",
  browseIcon: "",
  removeClass: "btn btn-danger",
  removeLabel: "",
  removeIcon: "<i class='icon-trash-alt1'></i>",
  showUpload: true,
  uploadAsync: false,
  uploadUrl: $('#upload-excel').attr('data-route'),
  uploadExtraData: {
    '_token': $('meta[name="csrf-token"]').attr('content')
  },
  allowedFileExtensions: ['xls', 'xlsx'],
  maxFileSize: 264000
})
.on('filepreajax', function(event, previewId, index){
  var coords = {
    latitude: 0, 
    longitude: 0
  };
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      coords = position.coords;
    });
  }
  var extraData = $(this).data('fileinput').uploadExtraData;
  $.extend(extraData, coords);
  $(this).fileinput("uploadExtraData", extraData);
})
.on('filebatchuploadsuccess', function(event, data) {
  let result = data.response.data;
  for (let i = 0; i < result.length; i++) {
    markup(result[i][0].a, result[i][0].b, result[i][0].c);
  }

  $('#modal_result').modal('show');
})
.on('filebatchuploaderror', function(event, data) {
  alert('Err!');
});

这是完全未经测试的，因为我不使用这个插件。我假设您正在使用 Bootstrap FileInput。

另一种选择是在uploadExtraData. 一个例子是：

uploadExtraData: function (previewId, index) {
  var obj = {
    '_token': $('meta[name="csrf-token"]').attr('content'),
    'latitude': 0, 
    'longitude': 0
  };
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      obj.latitude = position.coords.latitude;
      obj.longitude = position.coords.longitude;
    });
  }
  return obj;
}

无论是否移动，关键在于用户需要允许浏览器披露位置。当我在这里测试时：https ://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_geolocation我被提示阻止或允许在 FireFox 中显示我的位置。这意味着当您触发这段代码时，如果它处于用户无法允许活动或调整首选项的操作的中间，它可能会失败。

推荐阅读