0

问题定义：
我想从手机图库中选择多张图片并上传。但在上传之前，一旦用户选择图像，我想显示所选图像的预览。为了实现这一点，我使用了下面的代码片段，它可以在桌面浏览器上完美运行。但是，当使用移动浏览器尝试相同时，它不会显示图像的预览。
我尝试通过将以下代码作为 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>
4

1 回答 1

0

修改了另一个代码片段，使其在浏览器上正常工作。我修改的代码片段在下面的链接中提到。
在上传之前预览图像

下面是在桌面浏览器和移动浏览器上都能正常工作的代码片段。

<!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>
于 2013-07-11T12:08:49.840 回答