Question

问题定义：
我想从移动图库中选择多个图像并上传。但在上传之前，一旦用户选择图像，我想显示所选图像的预览。为了实现这一点，我使用下面的代码片段，它在桌面浏览器上完美运行。但是，当使用移动浏览器尝试相同时，它不会显示图像的预览我尝试将以下代码作为html文件以及w3schools.com提供的“自己尝试”编辑器执行。在这两种情况下，如果我使用桌面浏览器进行操作，它可以正常工作，但如果我使用的是移动浏览器，则无法显示图像预览。
W3shcools编辑：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
我正在使用谷歌浏览器的以下版本。
桌面：27.0.1453.94 m
手机：27.0.1453.90
手机型号：三星Galaxy S2

感谢这方面的任何帮助。

<!DOCTYPE html>
<html>
<head>
    <title>File API - FileReader as Data URL</title>
</head>
<body>
    <header>
        <h1>File API - FileReader</h1>
    </header>
    <article>
        <label for="files">Select multiple files: </label>
        <input id="files" type="file" accept="image/*" multiple/>
        <output id="result" />
    </article>
</body>

<script>
window.onload = function(){       
    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            //console.log(files);
            var output = document.getElementById("result");
            //console.log(result);
            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                //Only pics will be allowed
                if(!file.type.match('image'))
                  continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;
                    console.log(event);
                    var div = document.createElement("div");

                    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picFile.name +"' width='80' height='80'/>";
                    console.log(div.innerHTML);                  
                    output.insertBefore(div,null);            

                });

                 //Read the image
                picReader.readAsDataURL(file);
            }                               

        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}
</script>
</html>

Answer 1

修改了另一个代码段，使其在浏览器上正常运行。我修改的代码片段在下面的链接中提到 Preview an image before it is uploaded

以下是可在桌面浏览器和移动浏览器上正常使用的代码段。

<!DOCTYPE html>
<html>
<head>
    <title>File  API- FileReader as Data URL</title>
</head>
<body>
    <input type='file' id="imgInp" />
    <img id="myImage" src="#" alt="your image" />
</body>

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('myImage').src=e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
document.getElementById('imgInp').addEventListener("change",(function(e){
    readURL(this);
}));
</script>
</html>

在移动浏览器上传之前预览图像时出现问题，在桌面浏览器上正常工作

1 个答案: