当前位置: 代码迷 >> JavaScript >> 上传图标后刷新页面,图标不改变,一定要关掉浏览器后重开,图标才改变,该怎么处理
  详细解决方案

上传图标后刷新页面,图标不改变,一定要关掉浏览器后重开,图标才改变,该怎么处理

热度:160   发布时间:2012-07-23 09:42:19.0
上传图标后刷新页面,图标不改变,一定要关掉浏览器后重开,图标才改变
最近在弄google map api 的东西,在弄一个自定义marker 图标。 现在就是上传marker图标的图片后,不管怎么刷新页面,图标都不改变,一定要关掉浏览器之后重开,图标才改变。我觉得可能跟浏览器缓存或者之类的有关,但是也弄不明白。
现在想请问下,如果我要实现上传图标后程序刷新页面图标能改变,如何才能实现?谢谢
我的程序如下:
HTML code
<style type="text/css"> 
#Preview 
{ 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 

        <%
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver")
                    .newInstance();
            String url = "jdbc:sqlserver://localhost:1433;DatabaseName=image";
            String user = "sa";
            String password = "sa";
            Connection conn = DriverManager.getConnection(url, user, password);
            Statement stmt = conn.createStatement();

            String sql = "select * from img_info";

            //img_info info = new img_info();

            ResultSet rs = stmt.executeQuery(sql);

            ArrayList<String> lis_nam = new ArrayList<String>();
            ArrayList<Double> lis_lat = new ArrayList<Double>();
            ArrayList<Double> lis_lon = new ArrayList<Double>();
            ArrayList<String> lis_address = new ArrayList<String>();

            for (int i = 0; rs.next(); i++) {

                lis_nam.add(rs.getString("img_name"));
                lis_lat.add(rs.getDouble("img_lat"));
                lis_lon.add(rs.getDouble("img_lon"));
                lis_address.add(rs.getString("img_address"));

            }

            int size = lis_nam.size();
            String[] nam = (String[]) lis_nam.toArray(new String[size]);
            Double[] lat = (Double[]) lis_lat.toArray(new Double[size]);
            Double[] lon = (Double[]) lis_lon.toArray(new Double[size]);
            String[] address = (String[]) lis_address.toArray(new String[size]);
        %>



        <script type="text/javascript">
var infowindow;
(function() {

    google.maps.Map.prototype.markers = new Array();

    google.maps.Map.prototype.addMarker = function(marker) {
        this.markers[this.markers.length] = marker;
    };

    google.maps.Map.prototype.getMarkers = function() {
        return this.markers
    };

    google.maps.Map.prototype.clearMarkers = function() {
        if (infowindow) {
            infowindow.close();
        }

        for ( var i = 0; i < this.markers.length; i++) {
            this.markers[i].set_map(null);
        }
    };
})();

function initialize() {
    var latlng = new google.maps.LatLng(50.9406645, 6.9599115);
    var myOptions = {
        zoom : 12,
        center : latlng,
        streetViewControl : false,    //not allow the little man shown on the map
        mapTypeId : google.maps.MapTypeId.ROADMAP
    
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var tef = "<%=nam[0]%>";


    var a = new Array();
    var k=0;

<%for (int i = 0; i < size; i++) {%> 
    var t = new Object();
        t.name = "<%=nam[i]%>"
        t.lat = <%=lat[i]%>
    t.lng = <%=lon[i]%>
    a[k] = t;
    k++
        
<%}%>    


    for ( var i = 0; i < a.length; i++) {
        var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
        map.addMarker(createMarker(a[i].name, latlng));
    }
    console.log(map.getMarkers());

    console.log(map.getMarkers());
}


var mark=''; //set a variable of mark icon

//this function is to change the icon address
function selectIcon(imgFile){
    var newPreview = document.getElementById("Preview"); 
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; 
    newPreview.style.width = "80px"; 
    newPreview.style.height = "80px"; 
}


//change the icon picture
function changeIcon(){
<%
String ima=request.getParameter("image");
try{
String pathi=request.getRealPath("/");
File outputFile =null;
  
//out.print("image path is"+ima);
File inputFile = new File(ima);
BufferedImage input = ImageIO.read(inputFile);
  
  //转换为png格式的图片 
outputFile = new File(pathi+"/icon/icon.png");
ImageIO.write(input, "PNG", outputFile);
}
catch(Exception e)
{
 System.out.print(e.toString());
}
%>
}



function createMarker(name, latlng) {
    var marker = new google.maps.Marker( {
        position : latlng,
        icon : 'icon/icon.png',                //change the icon of the mark
        map : map
    });
    
    google.maps.event.addListener(marker, "click", function() {
        if (infowindow)
            infowindow.close();
        infowindow = new google.maps.InfoWindow(); //window.alert(name);
        infowindow.setContent(name+'缩略图位置<a href="get.jsp?name='+name+'"><image src="img/'+name+'_s.jpg" border="0"/></a>');
        infowindow.open(map, marker);
    });
    
    
    return marker;
}
</script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width: 50%; height: 400px; float: left;"></div>
        <br style="clear: both;" />
        <button onclick="map.clearMarkers();">
            clear
        </button>
        <br />
        <FORM METHOD=POST action="11.jsp"> 
        <p>请选择一个图片进行预览:<input type="file" size="20" name="image" onchange="javascript:selectIcon(this);" /></p> 
        <div id="Preview"></div> 
        <INPUT TYPE="submit" onclick="javascript:changeIcon();initialize()" value="提交">
        </FORM>
        <INPUT TYPE="submit" onclick="javascript:window.location.href=window.location.href;" value="提">
    </body>


</html>
 
  相关解决方案