使用ajaxFileUpload实现文件异步上传

最近在项目中遇到要使用ajax提交包含file输入框的表单的情况，网上查了下，发现ajaxFileUpload.js插件的比较多。就研究了下，发现真的不错。

传统的包含file输入框的表单提交遇到的问题：

1.表单要添加“enctype=multipart/form-data”，这样后台就无法像普通表单提交那样通过request.getParameter(name)来获得用户提交的参数。

2.表单一定要使用submit提交，不能使用ajax将表单信息序列化异步提交。这样就导致了不能实现提交结果的异步刷新和响应。

//传统表单的ajax序列化异步提交

artDialog.confirm('确认要保存用户信息？',function(){

$.ajax({

type: "POST",

url:$("#form").attr("action"),

data:$('#form').serialize(),// 要提交的表单

dataType:'json',

success: function(data) {

if(data){

artDialog.alert(data.message);

if(data.succeed == true){

gotoView('<%=path%>/userManage/getlist.do');

}

}

}

});

});

ajaxFileUpload的使用：

1.js的引入

<script src="<%=path%>/resource/js/jquery.js"></script>

<script type="text/javascript" src="<%=path%>/js/ajaxfileupload.js"></script>

2.file文本框，不受enctype=multipart/form-data的限制，可单独提交

<img src="<%=path%>/resource/images/sex1.png" id="personImage" style="width:160px;height:204px;">

<input id="fileToUpload" type="file" name="fileToUpload" class="input">

<a href="Javascript:void(0);" onclick="ajaxFileUpload();">上传头像</a>

3.js上传代码——核心

$.ajaxFileUpload({

url : '<%=path%>/userManage/fileToUpload.do',

secureuri : false,

fileElementId : 'fileToUpload',// 上传控件的id

dataType : 'json',

success : function(data, status) {

if(data.message) {

alert(data.message);

}

if(data.succeed == true){

$("#personImage").attr("src", "<%=path%>/userManage/previewImage.do?r="+Math.random());//改变图片显示

}

},

error : function(data, status, e) {

alert('上传出错');

}

});

4.spring
mvc上传文件的配置文件spring-MVC.xml

<!-- 配置文件上传 -->

<bean id="multipartResolver"

class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="utf-8">

<property name="maxUploadSize">

<value>104857600</value>

</property>

<property name="maxInMemorySize">

<value>4096</value>

</property>

</bean>

5.控制层接受上传文件

//头像上传

@RequestMapping(value="/fileToUpload.do")

public void fileToUpload(@RequestParam("fileToUpload") MultipartFile myfile,HttpServletRequest
request,HttpServletResponse response,HttpSession session){

try {

/*System.out.println("文件原名: " + myfile.getOriginalFilename());

System.out.println("文件名称: " + myfile.getName());

System.out.println("文件长度: " + myfile.getSize());

System.out.println("文件类型: " + myfile.getContentType());

System.out.println("========================================");*/

long size = myfile.getSize();//文件大小

String orgFilename = myfile.getOriginalFilename();

String name = myfile.getName();//input的name

String contentType = myfile.getContentType();

PrintWriter writer = response.getWriter();

response.setCharacterEncoding("UTF-8");//这两句是必须的，一定要加

response.setContentType("text/html;charset=UTF-8");

if(size>1024*1024){

jsonMap.put("succeed",false);

jsonMap.put("message","图片大小不能超过1M！");

writer.print("{succeed:false,message:\"图片大小不能超过1M！\"}");

}else{

session.setAttribute("myfileDate", myfile.getBytes());

writer.print("{");//username

//writer.print("succeed:true,message:\"文件大小:"+myfile.getSize()+",文件名:"+myfile.getName()+"\"");

writer.print("succeed:true,message:\"文件上传成功！\"");

writer.print("}");

}

writer.close();

} catch (Exception e) {

e.printStackTrace();

}

}

6.获得保存到session中的图片信息

//获得上传到session中的图片信息

@RequestMapping(value="/previewImage.do")

public void previewImage(HttpServletRequest request,HttpServletResponse response,HttpSession session){

try {

byte[] photo= (byte[]) session.getAttribute("myfileDate");

if(photo!=null){

OutputStream os = response.getOutputStream();

InputStream is = new ByteArrayInputStream(photo);

byte buf[] = new byte[1024];

while ((is.read(buf)) != -1) {

os.write(buf);

}

is.close();

os.close();

}

} catch (Exception e) {

e.printStackTrace();

}

}

遇到的问题：

1.上传文件失败时，不能进入 $.ajaxFileUpload中的error中，在火狐下查看，出现js报错。

解决方法：这是由于有些版本的jQuery中不包含handleError方法导致的，解决方式是在ajaxFileUpload.js中加入下面的代码：

handleError: function( s, xhr, status, e )
{

if ( s.error ) {

s.error.call( s.context || s, xhr, status, e );

}

if ( s.global ) {

(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );

}

}

2.ie9下明明网络请求返回的是200，但是总是提示上传文件失败；而ie8下弹窗提示出现了乱码。

解决方法：给response设置返回字符编码格式

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");