Javascript 在将图像上传到手机浏览器之前预览图像时出现问题，在桌面浏览器上可以正常工作_Javascript_Html

Javascript 在将图像上传到手机浏览器之前预览图像时出现问题，在桌面浏览器上可以正常工作

javascript html

Javascript 在将图像上传到手机浏览器之前预览图像时出现问题，在桌面浏览器上可以正常工作,javascript,html,Javascript,Html,问题定义：我想从mobile gallery中选择多个图像并将其上载。但在上传之前，一旦用户选择了图像，我想显示所选图像的预览。为了实现这一点，我使用了下面的代码片段，它在桌面浏览器上非常有效。但是，当使用移动浏览器尝试相同操作时，它不会显示图像预览。我尝试将下面的代码作为html文件执行，并在w3schools.com提供的“自己尝试”编辑器上执行。在这两种情况下，如果使用桌面浏览器，效果都很好，但如果使用移动浏览器，则不会显示图像预览。W3shcools编辑器：我正在使用以下版本的go

问题定义：
我想从mobile gallery中选择多个图像并将其上载。但在上传之前，一旦用户选择了图像，我想显示所选图像的预览。为了实现这一点，我使用了下面的代码片段，它在桌面浏览器上非常有效。但是，当使用移动浏览器尝试相同操作时，它不会显示图像预览。
我尝试将下面的代码作为html文件执行，并在w3schools.com提供的“自己尝试”编辑器上执行。在这两种情况下，如果使用桌面浏览器，效果都很好，但如果使用移动浏览器，则不会显示图像预览。
W3shcools编辑器：
我正在使用以下版本的google chrome。
桌面：27.0.1453.94米
移动电话：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>


文件API-FileReader作为数据URL
文件API-文件读取器
选择多个文件：
window.onload=函数（）{
//检查文件API支持
if（window.File&&window.FileList&&window.FileReader）
{
var filesInput=document.getElementById（“文件”）；
FileInput.addEventListener（“更改”，函数（事件）{
var files=event.target.files；//文件列表对象
//console.log（文件）；
var输出=document.getElementById（“结果”）；
//控制台日志（结果）；
对于（var i=0；i

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

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

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


文件API-FileReader作为数据URL
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
document.getElementById（'myImage'）.src=e.target.result；
}
reader.readAsDataURL（input.files[0]）；
}
}
document.getElementById（'imgInp'）。addEventListener（“更改”），（函数（e）{
readURL（this）；
}));

控制台中是否有错误消息？如果使用调试器单步执行会发生什么？我没有检查控制台。但是我没有使用console.log（value），而是尝试了alert（value）。设备浏览器上未显示任何警报。在桌面浏览器上，显示了带有值的警报框。您将警报放在了哪里？在上面的代码中，您可以看到“//console.log（文件）”//console.log（结果）”。这些行将替换为警报（文件）、警报（结果），这意味着事件未触发。事件处理程序是否已设置？在

fileInput.addEventListener（

.Oh）之前放置一个警报，并用警报替换

console.log（“您的浏览器不支持文件API”）；

。