库中的图像不显示 - 相机中的图像显示答案

【问题标题】：Image from library does not show - image from camera does库中的图像不显示 - 相机中的图像显示
【发布时间】：2013-08-19 04:55:58
【问题描述】：

使用这个来自互联网的流行代码：

代码

<input type="file" id="files" name="files[]" multiple="multiple" />
<output id="list"></output>
<script>
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new window.FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                        '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

在我的安卓平板电脑上，图像仅在使用相机拍照时显示，而不是从文件系统中选择图像。

在我的笔记本电脑（我只能从文件系统中选择文件）上显示图像。

这里有什么安全问题吗？

使用警报检查脚本在 android 设备上运行的距离，我可以看到脚本运行良好，没有任何错误。

Android 设备正在运行 Android 版本4.2.1

【问题讨论】：

标签： javascript android html security filereader

【解决方案1】：

请尝试此代码，我已跟踪问题。

    <!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            <input type="file" id="files" name="files[]" multiple="multiple" />
            <output id="list">
            </output>
        </body>
        <script>
            function handleFileSelect(evt) {
                var files = evt.target.files; // FileList object
                // Loop through the FileList and render image files as thumbnails.
                for (var i = 0, f; f = files[i]; i++) {
                    console.log("for call");

                    var reader = new window.FileReader();

                    // Closure to capture the file information.
                    reader.onload = (function(theFile) {
                        return function(e) {
                            // Render thumbnail.
                            var span = document.createElement('span');
                            console.log(e.target.result);
                            var spl = e.target.result.split(",");
                            console.log("data:image/png;base64," + spl[1]);
                            var el = "data:image/png;base64," + spl[1];

                            span.innerHTML = ['<img class="thumb" src="', el, '" title="', escape(theFile.name), '"/>'].join('');
                            document.getElementById('list').insertBefore(span, null);
                        };
                    })(f);

                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
                }
            }

            document.getElementById('files').addEventListener('change', handleFileSelect, false);
        </script>

    </html>

【讨论】：