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文件
第二步：HTML代码
账户：
密码：
第三步：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进行配置。
具体见：
@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 = $(' '); var oldElement = $('#' + fileElementId); var newElement = $(oldElement).clone(); $(oldElement).attr('id', fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); if (data) { for (var i in data) { $('').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);