JavaScript没有发送新值，也没有第一次触发onload

Question

我正在开发一个客户端可以上传图片的网络应用程序，我会在该图像中找到面孔并将矩形发送回客户端。

我使用ajaxfileupload函数在服务器上保存图像但是为了提高效率，我从客户端计算机加载图像并从服务器发送矩形。

我在这里有两个问题：

1-）对于第一个图像image.onload没有触发但是它的创建画布和uploadHandler函数没有调用。

2-）uploadHandler函数为所有图像获取相同的画布。因此它在第一张图像上绘制我的矩形。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
<script src="ocanvas-2.7.2.min.js"></script>

<script type="text/javascript">
function uploadHandler(canvas)
{
    $('input[type="file"]').ajaxfileupload({
        'action': 'upload',            
           'onComplete': function(response) {           

             for (var  i= 0; i < response.faces.length;i++) 
             {
                var item = response.faces[i];
                //alert("Tx:"+item.Tx+" Ty:"+item.Ty+" Bx:"+item.Bx+" By:"+item.By);
                var rectangle = canvas.display.rectangle({
                    x: parseInt(item.Tx),
                    y: parseInt(item.Ty),
                    width: parseInt(parseInt(item.Bx)-parseInt(item.Tx)),
                    height: parseInt(parseInt(item.By)-parseInt(item.Ty)),
                    stroke: "5px #0aa"
                });
                canvas.addChild(rectangle);

             }



       },
       'onStart': function() {

           }
    });
}

$(document).ready(function(){

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {

    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {
        var reader = new FileReader();


        reader.onload = function(e) {

            var img = new Image();

            img.onload = function(e) {

                var elementID = 'canvas' + $('canvas').length; // Unique ID
                 //create canvas
                $('<canvas>').attr({
                    id: elementID,
                    width: this.width + 'px',
                    height: this.height + 'px'
                }).appendTo('#fileDisplayArea');

                var canvas = oCanvas.create({
                    canvas: '#'+elementID
                }); 

                //add image to canvas
                var image = canvas.display.image({
                    x: this.width,
                    y: this.height,
                    origin:{x:this.width,y:this.height},
                    image: reader.result
                });
                canvas.addChild(image);


                //upload to server
                uploadHandler(canvas);

            }
            img.src = reader.result;


            //fileDisplayArea.appendChild(img);

        }

        reader.readAsDataURL(file); 

        } else {
            fileDisplayArea.innerHTML = "File not supported!";
        }

    });

});

</script>

这是4张图片

<input type="file" name="fileInput" id="fileInput"/>


<div id="upload" style="display: none;"></div>
<input id="predict" type="button" value="Process"></input>
<div id="work_place"></div>
<div id="fileDisplayArea">
    <canvas id="canvas0" width="634px" height="471px"></canvas>
    <canvas id="canvas1" width="600px" height="338px"></canvas>
    <canvas id="canvas2" width="400px" height="400px"></canvas>
    <canvas id="canvas3" width="960px" height="960px"></canvas>
</div>