HTML/JS上传图像从相机在iOS6

HTML/JS upload of images from camera on iOS6

本文关键字：相机 iOS6 图像 JS HTML      更新时间：2023-09-26

我有这样的代码片段:

<script>
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<div id="wrap"><img id="image" class="thumb draggable" src="', e.target.result,
                    '" title="', escape(theFile.name), '" draggable="true" /></div>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);

我在iOS的移动应用程序中使用它，它从相机捕获数据并在div中显示预览。一切都很好，除了我第一次在新设备上加载应用程序而未经批准访问照片(它提示你第一次尝试拍照)。

这里的问题是，当我在用户批准访问用户的照片之前调用reader.readAsDataURL(f);时，没有触发reader.onload。

是否有任何监听用户的批准，或者可能有一种方法来提示用户访问相机页面加载?

谢谢

我认为这里有两个问题。

首先，我假设我们正在收听<input type="file" />标记上的某种onchange事件，该事件调用相机/用户照片，然后调用读取文件的代码。如果没有，我们肯定应该这样做，因为这将等待适当的事件。

最后，我们将f作为参数传递给匿名函数，该函数在某种代码开始时返回另一个匿名函数，该函数将成为我们实际的事件侦听器。问题不在于在reader.readAsDataURL(f);调用文件，因为您首先在reader.onload中使用f作为参数。

看到f处于比reader.onload事件更高的作用域，我们应该能够执行以下操作:

reader.onload = function(e) {
    // Render thumbnail.
    var span = document.createElement('span');
    span.innerHTML =
        ['<div id="wrap"><img id="image" class="thumb draggable" src="',
        e.target.result, '" title="', escape(f.name), // we use f, not theFile
        '" draggable="true" /></div>'].join('');
    document.getElementById('list').insertBefore(span, null);
};

上面，我们消除了函数初始化，简单地引用已经在作用域中的f。这个函数也不会执行，除非我们有权限，所以这应该澄清你最初的用例问题。

相关文章：