动态更改传单ImageLayer Url

由于我的Javascript/Jquery知识不好，我现在在使用传单时遇到了麻烦：）

我想通过将照片上传到服务器来更改我的传单ImageLayer url。我搜索了很多图片文件上传到WCF服务，我做到了。但我不能给我的ImageLayer那个URL。

<div>
    <button id="btnBrowse" class="button primary on-right" onclick="openFileOption();">Browse</button>
</div>
<div class="custom-file">
    <input type="file" id="file" style="display:none" onchange="uploadPhoto();" />
</div>
<div id="base" style="display:none"></div>
<div id="map" style="width: 100%; height: 400px"></div>  

在我的HTML文件内容上方。我在LoadMap（）函数中加载了一次地图。然后在ChangeMap（）函数中更改它的URL。

<script>
    var mapLoadCount = 0;
    var map;
    var overlay;
    var bounds;
    function LoadMap() {
        mapLoadCount = mapLoadCount + 1;
        if (mapLoadCount == 1) {
            map = L.map('map', {
                minZoom: 1,
                maxZoom: 5,
                center: [0, 0],
                zoom: 3,
                crs: L.CRS.Simple
            }).setView([50.4333, 30.5167], 3);
            var w = 1526,
            h = 626,
            url = '';
            var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
            var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
            bounds = new L.LatLngBounds(southWest, northEast);
            overlay = L.imageOverlay(url, bounds);
            overlay.addTo(map);
            map.setMaxBounds(bounds);
        }
    }
    function onMapClick(e) {
        var newPosition = e.latlng;
        if (imageBounds.contains(newPosition)) {
            var newMarker = L.marker(newPosition).addTo(map);
        }
    }
    function ChangeMap(_url) {
        LoadMap();
        overlay.setUrl(_url)
        var popup = L.popup();
        var imageBounds = bounds;
        function onMapClick(e) {
            var newPosition = e.latlng;
            if (imageBounds.contains(newPosition)) {
                var newMarker = L.marker(newPosition).addTo(map);
            }
        }
        newMarkerGroup = new L.LayerGroup();
        map.on('click', onMapClick);
        map.on('drag', function () {
            map.panInsideBounds(bounds, { animate: false });
        });
    }
</script>

在下面的代码中，我正在读取图像文件并将其加载到服务器，然后用服务器上的图像url调用ChangeMap（）函数。

<script type="text/javascript">
    function readImage(input) {
        if (input.files && input.files[0]) {
            var FR = new FileReader();
            FR.onload = function (e) {
                $('#base').text(e.target.result);
            };
            FR.readAsDataURL(input.files[0]);
        }
    }
    function openFileOption() {
        document.getElementById("file").click();
    }
    function uploadPhoto() {
        var path = document.getElementById("file").value;
        var fileExtension = path.substring(path.lastIndexOf(".") + 1, path.length);
        var file = document.getElementById("file");
        readImage(file);
        var check = function () {
            if ($('#base').text() != "") {
                var base64 = $('#base').text();
                UploadToServer(base64); 
            }
            else {
                setTimeout(check, 1000); // check again in a second
            }
        }
        check();
        if (result == "true") 
        {
          ChangeMap("..''" + imageUrl);
        }
    }
    var result;
    var dataArr;
    var imageUrl;
    function UploadToServer(base64) {
        var url = $(location).attr('href');
        var baseURL = url.substring(0, url.indexOf('/', 8));
        var path = document.getElementById('file').value;
        var fileName = path.substring(path.lastIndexOf("''") + 1, path.length);
        fileName = fileName.substring(0, fileName.lastIndexOf("."));
        var fileExtension = path.substring(path.lastIndexOf(".") + 1, path.length);
        var jData = {};
        jData.base64 = base64;
        jData.fileName = fileName;
        jData.fileExtension = fileExtension;
        var Path = 'http://localhost/ImageUploaderService/FileUploader.svc/UploadPhotoToServer';
        var imagePath = "localhost''ImageUploaderService''";
        $.ajax({
            type: "POST",
            url: Path,
            data: JSON.stringify(jData),
            dataType: 'json',
            async: false,
            contentType: "application/json",
            beforeSend: function () {
            },
            complete: function () {
            },
            success: function (data) {
                if (data.indexOf('|')!= -1)
                {
                    dataArr = data.split('|');
                    result = dataArr[0];
                    imageUrl = dataArr[1];
                }
                if (result != "true") {
                    alert('Error while loading image to server. ' + data);
                }
            },
            error: function (responseData, textStatus, errorThrown) {
                alert('Error while loading image to server. ' + responseData + textStatus + errorThrown);
            }
        });
    }
</script>

我的实际问题是在第一次之后加载图像。当我第一次加载图像时，我的代码是将图像加载到服务器，获取图像的路径并将其加载到我的地图。但在第二次并没有改变我的传单图像图层的图像。之后，当我第三次加载时，它会加载第二个要映射的图像。在第四个图像中，它加载第三个图像，依此类推

我对FileReader.onload事件有疑问。因为当我调试我的代码时，我看到我的代码在调用ChangeMap（）函数后将加载FileReader的事件。我无法理解我的代码中发生了什么：）

编辑：这是我的代码的工作版本>http://jsfiddle.net/v905xhre/