本篇的具体思路来源于右侧网址:http://blog.csdn.net/qq_19551571/article/details/49977983
本篇代码有所修改,请具体区分。
本篇使用的是 form 提交,ajax 发送请求(但个人感觉把容器换成 div 之类的也是一样的思路,待验证),提交数据类型 FormData 对象。
H5中 form 表单的代码:
<form class="inpform" id="uploadForm" enctype="multipart/form-data"> <!-- 注意enctype必须得填 --> <div class="f-inp"> <div><i>请输入您的号码:</i> <input type="text" name="phone" id="phone" > </div> <input type="file" id="files" name="files" multiple/> <!-- multiple 确保能选择多文件 --> </div> </form> <input type="button" value="提交" onclick="add();">
js、ajax代码:
function add(){ var formData = new FormData($("#uploadForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。 $.ajax({ async: false, //要求同步 不是不需看你的需求 url : "/uploadImage/save", type : 'POST', data : formData, processData : false, //必须false才会避开jQuery对 formdata 的默认处理 contentType : false, //必须false才会自动加上正确的Content-Type success : function(result) { ... }, error : function(result) { ... } }); }
java Spring 中的代码:
处理器 @Controller @RequestMapping("/uploadImage") public class UploadController{ @RequestMapping("/savecc")
//注意传入的参数 public void saveImageCC (@RequestParam(value = "files", required = true)MultipartFile[] multipartFiles ,String phone, HttpServletRequest request)throws Exception{
... //调用文件上传处理类 Map<String, Object> result = UploadFilesUtils_cc.uploadCC(multipartFiles, request, 1, "", phone, 1000, 1000, true); ...
}
} utils类: public class UploadFilesUtils_cc { public static Map<String,Object> uploadCC(MultipartFile[] multipartFiles,HttpServletRequest request, int type,String module,String folder,int width, int height ,Boolean createFolder) throws UnsupportedEncodingException ,IOException , URISyntaxException{ request.setCharacterEncoding("utf-8"); //结果集 Map<String, Object> result = new HashMap<>(); //图片集 Map<String, String> data = new HashMap<>(); String uploadPath = "E:/reporitory/static/uploadImg/"+folder; File file = new File(uploadPath); if(!file.exists()){ file.mkdirs(); } try{ Boolean success = true ; String message = "文件上传失败"; String fieldNames = ""; String urls = ""; String uuid ; for(MultipartFile multipartFile:multipartFiles){ if(multipartFile != null){ //如果fileitem中封装的上传文件,得到上传的文件名称 //filename格式"c:/static/mod/xxx.png" String filename = multipartFile.getOriginalFilename(); fieldNames += "|" + multipartFile.getName(); if(StringUtils.isNotBlank(filename)){ // 注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如: // c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt // 处理获取到的上传文件的文件名的路径部分,只保留文件名部分 filename = filename.substring(filename.lastIndexOf("/") + 1); // 得到上传文件的扩展名 String fileExtName = filename.substring(filename.lastIndexOf(".")+1); // 如果需要限制上传的文件类型,那么可以通过文件的扩展名来判断上传的文件类型是否合法 // 此处是图片格式校验 if((type == Constant.FileType.image.key) && !UploadFilesUtils_cc.checkIMGType(fileExtName)) { message = "图片格式不正确,请重新上传"; success = false; result.put("success", success); result.put("message", message); return result; //break; } else { //使用UUID解决文件重名问题 uuid = UUID.randomUUID().toString(); //数据库里面需要保存的图片上传的路径 String url = uuid + "." + fileExtName; //获取item中的上传文件输入流 InputStream in = multipartFile.getInputStream(); //创建文件输出流 FileOutputStream out = new FileOutputStream(uploadPath + "\\" + url); //创建缓冲区 byte[] buffer = new byte[1024]; //判断输入流中的数据是否已经读完的标识 int len = 0; //循环将输入流读入缓冲区,(len=in.read(buffer))>0就表示in里面还有数据 while((len = in.read(buffer)) > 0){ //使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + url)当中 out.write(buffer , 0 , len); } //关闭输入流 in.close(); //关闭输出流 out.close(); if(StringUtils.isBlank(urls)){ urls = url; } else { urls += "|" + url; } } } //data.put("linked", "..."+folder+"/"+ urls); //data.put("filename", filename); } } fieldNames = fieldNames.substring(1); data.put("phone", folder); data.put("fieldNames", fieldNames); data.put("linked","..."+folder+"/"+ urls); result.put("success", true); result.put("message", "图片上传成功!"); result.put("data",data); return result; }catch(Exception e){ System.out.println("上传文件出现错误:" + e.getMessage()); return null; } } }