12

html5 を使用して、ドラッグ アンド ドロップの画像アップロード機能を作成しています。これはFirefoxではうまく機能しますが、クロムでは画像のオンロードイベントが初めて発生します。複数の画像を最初の作品だけにドラッグすると、2 番目の作品にドラッグすると失敗します。問題は画像のオンロードにあると思います。

これが私のコードの仕組みです。無関係なセクションを削除しました。

            var img = document.createElement("img");
            var reader = new FileReader();
            var canvas = document.createElement("canvas");
            var canvasData;
            var ctx = canvas.getContext("2d");
            var myFiles;
            var i = 0; 


                 reader.onload = (function (aImg)
                    { 
                        return function (e)
                        {
                            aImg.src = e.target.result;
                        };
                    })(img);

        img.onload = function (){

        //resizes image 
        //draws it to the canvas
        //posts to server

        i++;
        if(i < myFiles.length){
        processNext(i);
                            }
        }



    function processNext(filei) {

         var file = myFiles[filei];

            img.file = file;

            reader.readAsDataURL(file);


        }

i = 0;
myFiles = files;
processNext(0);

これがFirefoxでは機能するのにChromeでは機能しない理由を知っている人はいますか?

4

2 に答える 2

4

これは奇妙です。上記のどれも私にとってはうまくいきませんでした。イメージ変数をローカルとして定義し、それをグローバルに変更すると、機能し始めました。これは理にかなっていますか？誰かがそれを説明できますか？

これは私にとってはうまくいきませんでした：

function loadImage() {  
  var ImageToLoad = new Image();
  ImageToLoad.onload = function() {
      console.log("finish loading");
  };        
  ImageToLoad.src = "myimage.png";
}

これはうまくいきました：

  var ImageToLoad = new Image();
  function loadImage() {
  ImageToLoad.onload = function() {
      console.log("finish loading");
  };        
  ImageToLoad.src = "myimage.png";
}
于 2016-04-16T06:36:34.140 に答える