AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。
它的配置方式比较像jQuery的AJAX，使用比较方便
语法：$.ajaxFileUpload([options])
参数：
1，url 上传处理程序地址。
2，fileElementId 需要上传的文件域的ID，即<input type="file">的ID。
3，secureuri 是否启用安全提交，默认为false。
4，dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5，success 提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6，error 提交失败自动执行的处理函数。
7，data 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8, type 当要提交自定义参数时，这个参数要设置成post
使用步骤：
第一步：导入JQuery和ajaxFileUpload的js文件
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
第二步：HTML代码
<div style="200px;">
<p><img id="img" src="" alt="头像"/></p>
<p><input type="file" id="file" name="file" onchange="imgPreview();"/></p>
<p>账户：<input type="text" id="username"/></p>
<p>密码：<input type="password" id="password"/></p>
<p><input type="button" value="注册" onclick="register();"/></p>
</div>
第三步：JS代码
/*
用户—注册
*/
function register(){
//获取账户
var username = $('#username').val().trim();
if(username==null || username==''){
alert('账户为空！');
return false;
}
//获取密码
var password = $('#password').val().trim();
if(password==null || password==''){
alert('密码为空！');
return false;
}
//获取文件
var file = $('#file')[0].files[0];
if(!file){
alert('请上传头像文件！');
return false;
}
$.ajaxFileUpload({
"url": 'register.do',
"secureuri": false,
"fileElementId": "file",
"data": {"username":username,"password":password},
"dataType": "text",
"success": function(result){
alert('注册成功！');
},
"error": function(result){
alert('注册失败！');
}
});
}
第四步：后端java处理（spring）
在使用MultipartHttpServletReuqest和MultipartFile类时，要对spring进行配置。
具体见：http://www.cnblogs.com/gangbalei/p/6077791.html
@RequestMapping(value="/register.do")
public void upload(HttpServletRequest request) throws IOException{
//获取ajaxFileUpload上传时data中传递的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
// 判断request是否属于MultipartHttpServletRequest对象
// if(request instanceof MultipartHttpServletRequest){
// MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
// MultipartFile mfile = multipartRequest.getFile("file");
// }
//将request强转成MultipartHttpServletRequest对象
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
//获取上传的文件
MultipartFile mfile = multipartRequest.getFile("file");
//设置文件存放的位置
File dir = new File("F:/upload");
//如果目录不存在，则创建一个该目录
if(!dir.exists()){
dir.mkdir();
}
//获取上传的文件名
String fileName = mfile.getOriginalFilename();
//获取请求的输入流
InputStream in = mfile.getInputStream();
//读取输入流的数据
byte[] buf = new byte[1048576];
int length = in.read(buf);
//文件存放的完成路径
String path = dir.getAbsolutePath()+"//"+fileName;
//新建输出流
FileOutputStream out = new FileOutputStream(path);
//将数据写入输出流中
out.write(buf, 0, length);
//关闭输入输出流
in.close();
out.close();
}
注意：
使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的.
ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:
createUploadForm: function(id, fileElementId,data)
{
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
if (data) {
for (var i in data) {
$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
},
在ajaxFileUpload: function(s)的内容中
var form = jQuery.createUploadForm(id, s.fileElementId,s.data);