html5 ajax mvc,spring mvc html5实现ajax异步上传文件

html5升起，flash退出

实现条件:支持html5的浏览器,sprinf mvc文件上传配置,commons-fileupload包和commons-io包

$(function(){

var url="/cms-web/admin/pic/addPic";

function progressHandlingFunction(e){

if(e.lengthComputable){

$('progress').attr({value:e.loaded,max:e.total});

}

}

$("#upload").click(function(){

$("#attch").click();

});

$('#attch').change(function(){

var formData = new FormData();

formData.append("file",document.getElementById('imageFile').files[0]);

formData.append("blockIndex",1);

formData.append("blockNum",5);

formData.append("blockSize",2000);

formData.append("fileName","12345.zip");

formData.append("uniqueName","1234565678.zip");

$.ajax({

url: url,  //server script to process data

type: 'POST',

xhr: function() {  // custom xhr

myXhr = $.ajaxSettings.xhr();

if(myXhr.upload){ // check if upload property exists

myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload

}

return myXhr;

},

//Ajax事件

//beforeSend: beforeSendHandler,

// success: completeHandler,

//error: errorHandler,

// Form数据

data: formData,

//Options to tell JQuery not to process data or worry about content-type

cache: false,

contentType: false,

processData: false

});

});

});

Insert title here

java

@RequestMapping(value="/addPic",method=RequestMethod.POST)

public String addPic(@RequestParam("file") MultipartFile pic){

System.out.println(pic.getOriginalFilename());

return "pic/addIndexPic";

}