来自图书馆的图像不显示 - 来自相机的图像

时间:2013-08-19 04:55:58

标签: javascript android html5 security filereader

使用来自互联网的流行代码:

<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设备正在运行Android版4.2.1

1 个答案:

答案 0 :(得分:0)

请尝试使用此代码,我已跟踪此问题。

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