首先需要下载js文件，提供一个CSDN的下载地址
http://download.csdn.net/detail/aa5000ac/5945203
其依赖于jquery，需要自行下载jquery.js文件
页面布局：
<html lang="zh-CN">
<head>
<script src="/assets/js/vendor/jquery.js"></script>
<script src="/assets/js/vendor/ajaxfileupload.js"></script>
</head>
<body>
<form id="form2" action="/system/upload" enctype="multipart/form-data" method="post">
<input type="file" id="file" name="file">
</form>
</body>
</html>
JS代码如下：
<script>
function ajaxFileUpload() {
$.ajaxFileUpload({
url:'/system/upload',
secureuri:false,
fileElementId:'file', //注意1
dataType: 'JSON',//注意2
success: function (data, status) {
alert(data)
},
error: function (data, status, e) {
}
});
}
$(function(){
$("#file").on('change',function(){
ajaxFileUpload();
});
})
</script>其中需要注意的两点：
注意1 ：file指向文件上传的input 即
<input type="file" id="file" name="file">其中name为必须，否则会出现后台接收不到文件的情况
注意2：dataType的值必须为大写，否则在chrome下回出现handlerError的异常，但是小写的"text"的例外。
在chrome下，ajax返回的JSON数据会出现多余的 “<pre style="word-wrap: break-word; white-space: pre-wrap;">” 现象，下面给出一个简易的处理方式
success: function (data, status) {
var index1 = data.indexOf("{");
var index2 = data.lastIndexOf("}");
data = data.substring(inde1,inde2+1);
},
