2

我有这个片段：

<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不会触发。

是否有任何用户批​​准的监听器，或者是否有办法在页面加载时提示用户访问相机？

谢谢

4

1 回答 1

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已经在范围内的函数。除非我们获得许可，否则此功能也不会执行，因此这应该可以解决您最初的用例问题。

于 2013-03-12T05:44:07.477 回答