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

【问题标题】：PHP photo upload preview does not work with mobile camera photoPHP照片上传预览不适用于手机相机照片
【发布时间】：2021-07-08 01:01:48
【问题描述】：

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

当您点击手机上的上传元素时，操作系统会让您选择是从存储的文件中选择还是使用相机。如果您使用相机，则上传有效，但预览不会，除非我在以下 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() 来查看是否是时间问题，但没有奏效。

有什么想法吗？

【问题讨论】：

目前，除了询问浏览器是否确实报告了任何 javascript 错误之外，还不确定针对您的代码的具体问题的最佳建议？老实说，当我想在上传文件之前对本地图像进行这种预览时，我没有使用 FileReader() - 以您的代码为例，我只需设置预览的“src”图像为“input.files [0]”，浏览器应该负责渲染图像。您是否将 FileReader() 用于任何后续目的？如果只是为了图片预览，我想你可以不用它
不幸的是，没有 JavaScript 错误，因为这样可以很容易地追踪。我还尝试了将 input.files[0] 直接分配到预览图像的 src 中的建议，但如果我这样做，我根本无法获得预览。
实际上，我回去检查了一些我以前的代码，实际上我将（在您的情况下）“input.files[0]”值包装在 URL.createObjectURL() 中。你可以试试看。否则，您能否添加更多 HTML，以便我们可以看到实际的文件输入元素和应该显示预览的图像元素？
感谢您的 cmets，但看起来我已经弄清楚了。我会发布一个答案来解释，以防它帮助其他人。
好消息！是的，一定要发布答案——毕竟这就是关键——帮助别人和你自己:)

标签： javascript php file-upload

【解决方案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) 也可以。

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

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

【讨论】：