本文主要包含html5，ajax，Java等相关知识,匿名希望在学习及工作中可以帮助到您
html5图片上传【文件上传】，在网上找了很多资料，主要也就2种
1.from表单提交的方式
<form action="pushUserIcon" method="post" enctype="multipart/form-data">
<table>
<tr>
<td width="50" align=left>图片：</td>
<td><input type="file" name="file"/></td>
</tr>
<tr>
<td width="50" align="left">用户id：</td>
<td><input type="text" name="userId"/></td>
</tr>
<tr>
<td><input type="submit"> </td>
</tr>
</table>
</form>注意： enctype="multipart/form-data" 必须要填
1.1.Java页面直接提交：
@RequestMapping(value="/pushUserIcon",method=RequestMethod.POST)
@ResponseBody
public String pushUserIcon(HttpServletRequest request, HttpServletResponse response) throws IOException,BaseException {
String result = null;
String userId = request.getParameter("userId");
try{
//转型为MultipartHttpRequest(重点的所在)
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
//获得第1张图片（根据前台的name名称得到上传的文件）
MultipartFile file = multipartRequest.getFile("file");
result = uploadImageServic.uploadFile(file, request, userId);
System.out.println("result:" + result);
response.setContentType("text/html;charset=utf8");
response.getWriter().write("result:" + result);
}catch(Exception e){
BaseException baseException = new BaseException(e);
baseException.setErrorMsg("Upload API Exception");
throw baseException;
}
return null;
}
1.2.原生js 和jQuery的网上有很多，这里就不多说了。
1.2.1. fromData创建的两种方式
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]);2.不用from表单提交：
<table style="border: 1px solid black; width: 100%">
<tr>
<td width="50" align=left>图片：</td>
<td><input type="file" id="imageFile" name="img" multiple="multiple"/></td>
<td>
<input type="button" value="调用" onclick="pushImg()" />
</td>
</tr>
</table>HTML就这些，我想大家应该都能看懂，下面就要说说这2种提交方式，Ajax是如何编码？【from表单提交方式也可以使用js或者直接提交页面刷新】
Ajax编码也有2种：
1.原生js
function sub()
{
var file = document.getElementById("imageFile");
var files = file.files;
for(var i = 0 ; i < files.length;i++)
{
uploadFile(files[i]);
}
}
var xhr = null;
function uploadFile(file) {
xhr = new XMLHttpRequest();
/* xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false); */
xhr.open("post", "upload/", true); //访问控制器是upload，后面必须加'/'否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
var fd = new FormData();
fd.append("userID", "1");
fd.append("errDeviceType", "001");
fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af");
fd.append("errType", "001");
fd.append("errContent", "XXXXXX");
fd.append("errPic", file);
xhr.send(fd);
xhr.onreadystatechange = cb;
}
function cb()
{
if(xhr.status == 200)
{
var b = xhr.responseText;
if(b == "success"){
alert("上传成功！");
}else{
alert("上传失败！");
}
}
}