我想问一个js+jspsmartupload上传的问题，大虾来帮我看看吧

现在做一个用imagecopper裁剪图片后上传的功能，利用jspsmartupload上传组件进行上传。
我的问题如下：
1、jspsmartupload上传文件是不是都要用<input type="file" />进行上传
2、我上传后没有报错，但并没有真正上传到服务器，打印的mySmartUpload.getSize() 为18602，但mySmartUpload.getFiles().getCount()为0
3、代码如下:
<!DOCTYPE HTML>
<!-- saved from url=(0037)http://www.riaidea.com/html5/cropper/ -->
<!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=11.0000"
http-equiv="X-UA-Compatible">

<META name="Author" content="flashlizi - www.riaidea.com">
<META name="Description" content="HTML5 experiment">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>头像上传组件 - HTML5版</TITLE>
<STYLE>
body
{
padding: 0;
margin: 0;
height: 100%;
background-color: #eee;
font-size: 12px;
color: #000;
text-align:center;


}

a
{
text-decoration: none;
color: #fff;
padding:10px 10px 10px 10px;
text-align:center;
background-color:#1A8EE6;
}
a span
{
width:100px;
height:30px;

padding:10px 20px 10px 20px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background:#3399cc;
-moz-box-shadow:
0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
-webkit-box-shadow:
0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
box-shadow:
0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
}
a:hover
{
text-decoration: none;
color: #f00;
}

#container
{
position: absolute;
left: 20px;
top: 20px;
}

#wrapper
{
position: absolute;
left: 0px;
top: 40px;
}

#cropper
{
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #ccc;
}

#previewContainer
{
position: absolute;
left: 350px;
top: 60px;
}

.preview
{
border: 1px solid #ccc;
}

#selectBtn
{
position: absolute;
left: 0px;
top: 0px;
width: 119px;
height: 27px;
background: url(images/select.png);
}

#saveBtn
{
position: absolute;
left: 150px;
top: 0px;
width: 67px;
height: 27px;
background: url(images/save.png);
}

#rotateLeftBtn
{
position: absolute;
left: 0px;
top: 315px;
width: 100px;
height: 22px;
padding-left: 25px;
padding-top: 2px;
background: url(images/left.png) no-repeat;
}

#rotateRightBtn
{
position: absolute;
left: 144px;
top: 315px;
width: 100px;
height: 22px;
padding-right: 25px;
padding-top: 2px;
background: url(images/right.png) no-repeat right;
}

</STYLE>
<!--<script type="text/javascript" src="ImageCropper.js"></script>-->
<SCRIPT src="头像上传组件%20-%20HTML5版_files/imagecropper.min.js" type="text/javascript"></SCRIPT>

<SCRIPT type="text/javascript">

var cropper;

function init()
{
cropper = new ImageCropper(300, 300, 180, 180);
cropper.setCanvas("cropper");
cropper.addPreview("preview100");
cropper.addPreview("preview50");

if(!cropper.isAvaiable())
{
alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
}
}

function selectImage(fileList)
{
cropper.loadImage(fileList[0]);
}

function rotateImage(e)
{
switch(e.target.id)
{
case "rotateLeftBtn":
cropper.rotate(-90);
break;
case "rotateRightBtn":
cropper.rotate(90);
break;
}
}

function saveImage()
{
var imgData = cropper.getCroppedImageData(180, 180);

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e)
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
document.getElementById("status").innerHTML = "<font color='#f00'>上传成功！</font>";
}
}
};

xhr.open("post", "servlet/SmartUploadServlet", true);
var data = new FormData();
data.append("username", "flashlizi");
data.append("size", 180);
data.append("file", imgData);
xhr.send(data);
}

function trace()
{
if(typeof(console) != "undefined") console.log(Array.prototype.slice.apply(arguments).join(" "));
};

</SCRIPT>

<META name="GENERATOR" content="MSHTML 11.00.9600.17105"></HEAD>
<BODY onload="init();">
<DIV id="container"><A id="selectBtn" onclick="document.getElementById('input').click();"
href="javascript:void(0);"><span>选择图片</span></A> <A id="saveBtn" onclick="saveImage();" href="javascript:void(0);"><span>保存</span></A>
<INPUT id="input" style="visibility: hidden;" onchange="selectImage(this.files)" type="file" size="10">

<DIV id="wrapper"><CANVAS id="cropper"></CANVAS> <A id="rotateLeftBtn"
onclick="rotateImage(event);" href="javascript:void(0);">向左旋转</A>
<A id="rotateRightBtn"
onclick="rotateImage(event);" href="javascript:void(0);">向右旋转</A> <SPAN id="status"
style="left: 350px; top: 10px; width: 100px; position: absolute;"></SPAN>
<DIV id="previewContainer"><CANVAS
width="100" height="100" class="preview" id="preview100" style="left: 230px; top: 0px; position: absolute;"></CANVAS>
<SPAN style="left: 230px; top: 110px; width: 100px; text-align: center; position: absolute;">中尺寸图片
100x100像素</SPAN> <CANVAS width="50" height="50" class="preview" id="preview50"
style="left: 255px; top: 150px; position: absolute;"></CANVAS> <SPAN style="left: 245px; top: 210px; width: 70px; text-align: center; position: absolute;">小尺寸图片
50x50像素</SPAN> </DIV></DIV></DIV></BODY></HTML>