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

Question

我有一个响应式网络应用程序，用户可以在其中上传照片。在桌面上运行良好，甚至在移动设备上运行 phone 只要您 select 现有文件并且不要尝试拍照上传。

当您点击 phone 上的上传元素时，OS 让您可以选择从存储的文件中选择还是使用相机。如果您使用相机，则可以上传，但预览不会，除非我在下面的某处插入警报 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 位于弹出窗口 window 内，而在此弹出窗口 window 内，我无权访问 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) 也可以。

我不知道为什么移动设备上的文件选择器 phone 之前可以工作，因为基于此也不应该工作，而且我也不知道为什么插入警报使其工作，但是什么。现在可以使用了。

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

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

PHP photo upload preview does not work with mobile camera photo

javascript

php

file-upload