我正在开发一个用于从移动设备上传照片的网页,使用 <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
股票浏览器
最佳答案
由于问题可能与浏览器有关,并且您无法真正修复浏览器(尽管您可以向 Google 报告错误),我建议采取不同的方法。
看这里: In Node.js, given a URL, how do I check whether its a jpg/png/gif?
查看已接受答案的评论,建议使用文件流检查文件类型的方法。我很确定这适用于浏览器实现的 Javascript,而不仅仅是 Node.js。
关于javascript - 库存浏览器从图库中挑选照片的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17702396/