文件上传功能会显示 Safari 和 Chrome iOS8.1.2 上带有空字符串的数据
File Upload shows data with empty strings on Safari and Chrome iOS8.1.2
您好,我们在Chrome上的文件上传和IOS 8.1.2上的Safari上遇到了问题。一些照片上传显示带有空字符串的数据,其他照片显示正常。 有人知道解决方法,以便上传的照片可以一致地显示吗?非常感谢。
最初我们认为这是iOS 8 Safari上文件上传功能损坏的已知问题。"http://blog.uploadcare.com/you-cannot-upload-files-to-a-server-using-mobile-safari/"。但是,它似乎是8.0.0的问题,并且应该已修复。此外,该问题不仅限于Safari,也出现在Chrome iOS中。
具体来说,当选择的照片直接从iPHONE相机拍摄时,数据显示为空(请参阅登录控制台)
[日志] 对象(控制器.js,第 228 行)src:"data:","
但是,当选择的照片是屏幕截图或从电子邮件保存的照片时,实际上会显示图像并发送数据
[日志] 对象(控制器.js,第 228 行)src: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/
7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA有没有人遇到过类似的问题?为什么它适用于某些照片而不适用于其他照片?有谁知道显示从相机本身拍摄的图像的任何解决方法?
这里的代码片段:
$scope.getAlbumPicture = function() {
Camera.getAlbumPicture().then(function(fileURI) {
$scope.normalisePicture(fileURI, function(dataURL) {
Local.setTemp(dataURL);
$state.go('tab.camera-detail');
});
}, function(err) {
console.log(err);
});
};
$scope.readImage = function(input) {
if (input.files && input.files[0]) {
var fileReader = new FileReader();
fileReader.onloadend = function() {
$scope.normalisePicture(fileReader.result, function(dataURL) {
Local.setTemp(dataURL);
$state.go('tab.camera-detail');
});
};
fileReader.readAsDataURL(input.files[0]);
}
};
TL;DR 最近我遇到了类似的问题,发现了这个线程,这可能是iPhone的内存不足问题,除了使用canvas元素调整大尺寸图像的大小外,您可以做的不多,我使用1200作为图像调整大小的最长宽度/高度,然后一切再次正常工作。
对于任何功能参考,我的测试中出现的更具体的硬件和软件问题是iPhone 6 Plus和iOS 8.1.2,我尝试对图像执行的过程是:
- 将
FileReader.onLoad = func
与FileReader.readAsDataURL()
一起使用base64
将input[type="file"]
的文件作为字符串读取。 - 将
base64
指定为new image()
的src
- 在里面
image.onload = func
画一个新的canvas
2d context
,与上图相同,高度和高度。 - 检查一些方向EXIF信息,然后旋转画布。
- 最后用
base64
一串新图像做其他工作人员,生成canvas.toDataURL()
形式。
在步骤 1 到步骤 2 和步骤 5 之间随机出现的空data:
取决于从"input[type="file"]获取的图像大小。
就我而言,这里的iOS Safari似乎可以将图像数据分配给具有相同宽度和高度的canvas
,但如果画布的尺寸非常大,则无法toDataURL
画布。但是 Safari 无论如何都不会挂起,我可以重新点击input[type="file"]
以获取下一个文件,因为空data:
是从上一个文件输出的。
- 停止JSON.parse()从JSON字符串数据中删除尾随零
- 如何解析文本区域中的结构化字符串数据(接近JSON)以检索其所需的属性
- 如何使用 jQuery 发送包含特殊字符的查询字符串数据
- 带有 base64 字符串(数据 URI)的 HTML 图像标记
- 在 JQuery ajax POST 调用中传递非字符串数据
- 将大型字符串数据从 HTML/Javascript 发送到代码隐藏
- 如何对字符串数据进行分类 javascript
- 用javascript上的字符串数据对数组进行排序
- 如何在ajax成功调用的html表中显示字符串数据
- 将字符串数据作为类别传递给Highcharts
- 将字符串数据从 C# 传递到 JS
- Javascript:如何从字符串数据动态构建方法
- 正在尝试仅打印字符串数据
- 如何将字符串数据从ajax成功转换为javascript数据
- 如何从JarClassLoader和返回字符串数据的applet Launcher调用小程序中的方法
- Jquery$.ajax没有在ASP.NET MVC中发布字符串数据
- 字符串数据转换为数组问题
- 我无法在流星正确显示字符串数据
- 如何在angularjs中最小化一组字符串数据
- 过滤json字符串数据