代码如下：
<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;">
<div id='box'>
</div>
</form>
</body>
</html>