0

問題定義:
モバイル ギャラリーから複数の画像を選択してアップロードしたい。しかし、アップロードする前に、ユーザーが画像を選択するとすぐに、選択した画像のプレビューを表示したいと考えています。これを実現するために、デスクトップ ブラウザで完全に動作する以下のコード スニペットを使用しています。しかし、モバイルブラウザで同じことをしようとすると、画像のプレビューが表示されません。
w3schools.com が提供する "try it yourself" エディターと同様に、以下のコードを html ファイルとして実行してみました。どちらの場合も、デスクトップ ブラウザを使用している場合は問題なく動作しますが、モバイル ブラウザを使用している場合は画像のプレビューが表示されません。
W3shcools エディター: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Google Chrome の以下のバージョンを使用しています。
デスクトップ: 27.0.1453.94 m
モバイル: 27.0.1453.90 モバイル
モデル: Samsung 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