html5 ajax 文件上传,html5+FormData 实现ajax文件上传

大家都知道在html4时代，上传只能使用表单post提交方式，无法使用ajax(XMLHttpRequest )直接进行表单提交。但在HTML 5的概念形成后，W3C开始考虑标准化XMLHttpRequest Level接口，配合FormData即可实现ajax文件上传。

1、upload.jsp

IIS系统

/**

* ajax 上传。

*/

function uploadByForm() {

var formData = new FormData($("#myForm")[0]);

//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。

//var formData = new FormData();//构造空对象，下面用append 方法赋值。

// formData.append("policy", "");

// formData.append("signature", "");

// formData.append("file", $("#file_upload")[0].files[0]);

var url = "upload";

$.ajax({

url : url,

type : 'POST',

data : formData,

/**

* 必须false才会避开jQuery对 formdata 的默认处理

* XMLHttpRequest会对 formdata 进行正确的处理

*/

processData : false,

/**

*必须false才会自动加上正确的Content-Type

*/

contentType : false,

success : function(responseStr) {

alert("成功：" + JSON.stringify(responseStr));

// var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")");

},

error : function(responseStr) {

alert("失败:" + JSON.stringify(responseStr));//将 json对象 转成 json字符串。

}

});

}

说明:

ajax 文件上传 。

*图片选择:

class="form-control" placeholder="图片地址">

οnclick="uploadByForm();">Ajax上传

2、springmvc的UploadController：

@Controller

public class UploadController {

@RequestMapping(value = "/upload")

@ResponseBody

public ResultMessage upload(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request, ModelMap model) {

String anme = request.getParameter("name");

System.out.println("开始");

String path = "D:\\iis\\uploadFiles";

String fileName = file.getOriginalFilename();

// String fileName = new Date().getTime()+".jpg";

System.out.println(path);

File targetFile = new File(path, fileName);

if(!targetFile.exists()){

targetFile.mkdirs();

}

//保存

try {

file.transferTo(targetFile);

return new ResultMessage(0,"成功...");

} catch (Exception e) {

e.printStackTrace();

return new ResultMessage(1,"失败....");

}

}

}