Question

我正在使用<input type="file" accept="image/*"/>标签在移动设备上传照片的网页上工作。这在iphone和android上的chrome上运行得很漂亮，但我们遇到问题的地方是使用股票android浏览器。

当您从图库中选择一个文件时出现问题（当您使用相机拍照时，它可以正常工作）。我们已经进一步缩小范围，以便从库存浏览器的库中看到数据MIME类型不可用（下面的照片显示了正在加载的数据URL的前100个字符。目标是强制JPEG ，但没有MIME类型，我们无法确定如何解决这个问题。请参阅下面的代码，了解图像的呈现方式。

如何在没有类型的情况下渲染图像？更好的是，有没有人知道为什么这个类型在股票Android浏览器上不可用？

修改

首先，它们不是同一个图像，它们是在同一时间拍摄的，这不是问题，这就是数据不同的原因（MIME类型没有出现在股票浏览器的任何图像上，所以这是不是问题。

更新

我通过将image / jpeg插入到Chrome浏览器的库存浏览器中来确认MIME类型是个问题。不幸的是，我们无法保证它会成为jpeg，所以我们再也不能这样做了

 _readInputFile: function (file, index) {
            var w = this, o = this.options;
            try {

                var fileReader = new FileReader();

                fileReader.onerror = function (event) {
                    alert(w._translate("There was a problem opening the selected file. For mobile devices, some files created by third-party applications (those that did not ship with the device) may not be standard and cannot be used."))
                    $('#loadingDots').remove();
                    return false;
                }
               fileReader.onload = function (event) {

                var data = event.target.result;
                //alert(data.substring(0,100));
                //var mimeType = data.split(":")[1].split(";")[0];


                alert("Load Image"); //I get to this point
                $('#' + w.disp.idPrefix + 'hiddenImages').append($('<img />', {
                    src: data,
                    id: "dummyImg" + index,
                    load: function(){
                    var width = dummy.width();
                    var height = dummy.height();
                    $('#dummyImg' + index).remove();
                    alert("Render"); // I don't get here
                        var resized = w._resizeAndRenderImage(data, null, null, biOSBugFixRequired, skewRatio, width, height);
                        alert("Image Rendered"); // I don't get here

                    }
                }));
            }
            fileReader.readAsDataURL(file);
        }
        catch (e) {
        }  
 }

铬
Chrome

Stock Browser

Answer 1

由于该问题可能与浏览器相关，而且您无法真正修复浏览器（您可以向Google报告错误），我建议采用不同的路径。

看看这里： In Node.js, given a URL, how do I check whether its a jpg/png/gif?

请参阅已接受答案的注释，其中提供了一种使用文件流检查文件类型的方法。我很确定这可以在浏览器实现的Javascript上运行，而不仅仅是在Node.js中。

库存问题浏览器从图库中选择照片

1 个答案: