Question

我有一个响应式网络应用，用户可以在上面上传照片。只要您选择现有文件并且不尝试拍照上传，在桌面上甚至在手机上都可以正常工作。

当您点击手机上的上传元素时，操作系统会让您选择从存储的文件中选择还是使用相机。如果您使用相机，则上传有效，但如果我在以下 javascript 中的某处插入警报，则预览不会。（此代码在文件输入更改时触发）

var photoFileSelected = function(event) {
  var input = event.target;

  //************************************************************************//
  //*** Initialize previewPopup
  //************************************************************************//

  var previewPopup = $('#uploadprompt').mobiscroll4().popup({
    display: 'top',
    responsive: {small: {display: 'center'}},
    closeOnOverlayTap: false,
    buttons: [{
        text: 'Save',
        cssClass: 'mbsc-fr-btn uploadprompt-okbutton mbsc-disabled',
        handler: function(event,inst){startUploadingPhoto();}
      },'cancel'],
    }).mobiscroll4('getInst');

  //************************************************************************//
  //*** Validate selected file
  //************************************************************************//

  // get selected file element
  var oFile = document.getElementById('image_file_photo').files[0];
  var valid = true;

  // filter for image files
  var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
  if (! rFilter.test(oFile.type)) {
    popup("Error","Invalid file type selected.  Must be an image file")
    valid = false;
  }

  // little test for filesize
  if (oFile.size > iMaxFilesize) {
    popup("Error","Selected file is too large.  Max size is 10 MB.")
    valid = false;
  }

  if(valid){

    //************************************************************************//
    //*** Load image preview
    //************************************************************************//

    var reader = new FileReader();
    reader.onload = function(){
      $('.uploadprompt-okbutton').removeClass('mbsc-disabled');
      var dataURL = reader.result;
      $('#preview-photo').attr("src",dataURL);
    };

    reader.readAsDataURL(input.files[0]);

    previewPopup.show();
  }

};

例如，我可以提醒 oFile.size 并提醒一个值，当我关闭弹出窗口时，预览已加载，一切正常。如果我注释掉警报，则大多数情况下根本不会加载预览。有时我可以让它加载，但我似乎找不到模式。似乎是随机的。我已经让它加载了大约 5% 的时间，但绝大多数时间预览不会显示，但我知道文件上传正在工作，因为正如我所说，我可以提醒文件大小甚至 dataURL 和它看起来很正常。

我还尝试使用 setTimeout() 来查看是否是时间问题，但没有奏效。

有什么想法吗？

Answer 1

所以我必须在我的 Android 上启用 USB 调试才能找到答案。问题是我的预览 img 在一个弹出窗口内，在这个弹出窗口内我无权访问 document.getElementById("preview-photo") 或 $('#preview-photo')，虽然我不是知道为什么，所以我的预览图像标签为空。

我必须更改它才能通过类名获取标记的句柄。

var previewimage = this.getElementsByClassName('preview-photo')[0];
var reader = new FileReader();
reader.readAsDataURL(oFile); 

reader.onloadend = function(){ 
  previewimage.src = reader.result;
}

我想 $('.preview-photo').attr('src',reader.result) 也可以。

我不知道为什么手机上的文件选择器以前可以工作，基于此原因也不应该工作，我也不知道为什么插入警报使它工作，但是什么。现在可以使用了。

今日专业提示：在 Android 中使用 USB 调试器。

PHP 照片上传预览不适用于手机相机照片

1 个答案: