HTML5潮流：上传图片轻松搞定，Ajax编码新技能

嘿哥儿们，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，就能轻松搞定，让后台管理起来井井有条。

原文链接：https://www.icz.com/technicalinformation/web/2024/05/16005.html，转载请注明出处~~~