嘿哥儿们，HTML5听过没？做网页就像打游戏一样简单！尤其是那个传文件功能，太牛X了！今天咱就说说怎么用HTML5上传图片，还得教你们几个Ajax编码的简便方法。学会了这些，你做网页就轻松多了。
1.from表单提交的方式
| 图片： | |
| 用户id： | |
想让大家在网站上传文件吗？超简单！只需要把’enctype’设置成’multipart/form-data’，服务器立马懂了：这个表单里可不止有数据，还有其他东西要传，比如说文件~
1.1.Java页面直接提交：
用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;
}
原生JS和jQuery的教程网上多得很，咱们直接跳过这部分！
别担心，哪怕是简单的HTML页面，我们照样能传数据。用原生JavaScript或jQuery都行，里面好多好用的API和插件帮你搞定文件上传。比如，用那个FormData就能构造表单信息，然后借助Ajax一下子就提交成功！
1.2.1.FormData创建的两种方式
说到JavaScript处理表单数据和传文件这个事儿，你可知道FormData这个小能手？其实就俩方法，第一种直接用”newFormData()”召唤一个崭新FormData出来；第二种，就是把现成的form元素当作食材，喂给FormData的构造函数，这样就能把表单信息变成一堆键值对了。
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表单提交
你还在用旧方法上传文件吗？现在HTML5也提供了新的上传手段像Ajax这样的技术，让上传文件变得超级简单。
| 图片： |
HTML我们都明白了，那现在来说说Ajax编码的事！
【from表单提交方式也可以使用js或者直接提交页面刷新】
Ajax编码也有两种：
2.1.原生js
想要用原生的Javascript来搞定AJAX请求，那你就得亲手搭建一个XMLHttpRequest对象了。然后？就是在这个对象上设置一下回调函数，用来处理发送和接收数据的小事儿！
2.2.jQuery
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("上传失败！");
}
}
}
有了jQuery这个好帮手，再去弄那个原始的老旧JS就太费劲！用上那些好用到爆的$ajax()、$get()、$post()函数，上传文件就跟玩儿似的。
咱们前端搞定了，赶紧开始接后面的接口！咱们早就知道要传哪些参数和访问哪个地址了，现在就差接入接口服务~
SpringMVC框架：
function pushImg(obj) {
debugger;
var url = “upload/”; //访问控制器是upload，后面必须加’/’否则会报错”org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult…”,但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
var param = $(“#errorParameter”).val();
var files = $(“#imageFile”).get(0).files[0]; //获取file控件中的内容
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”, files);
$.ajax({
type: “POST”,
contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
processData: false, //必须false才会自动加上正确的Content-Type
url: url,
data: fd,
success: function (msg) {
debugger;
var jsonString = JSON.stringify(msg);
$(“#txtTd”).text(jsonString)
alert(jsonString);
},
error: function (msg) {
debugger;
alert(“error”);
}
});
}
老实说，你知道吗？在JavaEE平台里，SpringMVC就是人气火爆的Web框架！它特别好使的地方在于，能帮咱们解决一些棘手的上传文件问题。就像API定义和路径匹配这种小事情，只需要写几个简单的标签，比如@Controller和@RequestMapping，就能轻松搞定，让后台管理起来井井有条。
评论0