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

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

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

1 个答案: