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

Question

我有这个片段:

<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。

是否有任何用于用户批准的监听器，或者是否有一种方法可以提示用户在页面加载时有权访问相机？

谢谢

Answer 1

我认为这里的问题有两个方面。

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

最后，我们将通过 f作为匿名函数的参数，在某种代码启动中，它返回另一个匿名函数，它成为我们实际的事件监听器。问题不在于调用位于 reader.readAsDataURL(f); 的文件看到你使用 f作为参数首先在 reader.onload .

看到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);
};

在上面，我们删除了我们的函数 inception 并简单地引用了 f这已经在范围内。除非我们获得许可，否则此功能也不会执行，因此这应该可以解决您最初的用例问题。