javascript - 我想实现上传两张图片，结果上传第二张时第一张就不见了。-PHP中文网问答

代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
 $(function(){
     var num=0;
     
    $('#input').change(function(){
        num++;
        var mm=num*110;
        console.log(mm);
        console.log(num);
        var img="";
        var arr=[];
        var url=$('#input').val();
        arr.push(url);
        
        console.log(arr.length);
        while(arr.length>4){
            return -1;
        }
        for(var i=0;i<arr.length&&num<3;i++){
                var file=document.getElementById("input").files[i];
                var reader=new FileReader();
                reader.readAsDataURL(file);
                reader.onload=function(){
                    ss=reader.result;
                    img+='<img src="'+ss+'">'
                      //$('#box').html(img);
                      document.getElementById("box").innerHTML=img;
                     $('#box').css({'margin-top':'-99px','margin-left':+mm+'px','width':'500px','height':'200px','overflow':'hidden'});
        $('#box img').css({'width':'100px','height':'100px','float':'left'});  
                };
               
        }
       
    
    }); 
    
 });
</script>
<style type="text/css">

        input{position:relative;opacity:0;z-index:99;width:100px;height: 100px;}
        #img{position: absolute;top:10;left:10;}
</style>
</head>
<body>
<form name="form1" id="form1">

<input id="input"  type="file" multiple/>
<img id="img" src="Chrysanthemum.jpg"  width="100" height="100" style="float: left;">
<p id='box'>
        
</p>

</form>
</body>
</html>